How to offset where page jumps to by height of header

  • Resolved freygl

    (@freygl)


    3 months, 1 week ago

    Hello, I got the sticky header to work (although it is still doing that ugly thing where if you resize the page small, the header gets smaller and then stays small even when you resize the window bigger again).

    But my question is how to offset where page jumps to by height of header.

    I have links that go to certain sections of a page, but now with the sticky header when it jumps there, the viewer doesn’t see the first 30-50 pixels of content (the height of the header) because it is overlapping.

    What would I have to do to get the header to be sitting just above the anchor that the link jumps to. I don’t know how to write code but I can copy CSS code if I was given an exact code.

    Thank you for your assistance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Alexandru Tapuleasa

    (@talextech)

    Hi,

    Since the header is sticky and floating over the page, the anchors will jump all the way to the top of the page. I found this solution after searching online for a bit, basically to add some invisible padding to the anchor which might work (replace [id] with the anchor’s #id):
    [id]::before {
    content: '';
    display: block;
    height: 75px;
    margin-top: -75px;
    visibility: hidden;
    }

    Thread Starter freygl

    (@freygl)

    Hi Alexandru,

    I tried adding that to “additional CSS” on the Appearance Editor page. I tried it with a few different anchor names but it didn’t change anything.

    Am I supposed to add the CSS to the page itself? If so which block type do I use to do that?

    Thank you for your assistance

    Plugin Author Alexandru Tapuleasa

    (@talextech)

    Normally you would add it in your theme’s custom CSS like Appearance -> Customize -> Custom CSS.

    If the html of the anchor is <a id=”section5″></a> then the CSS should be:
    #section5::before {
    content: ”;
    display: block;
    height: 75px;
    margin-top: -75px;
    visibility: hidden;
    }

    If that doesn’t work, maybe the CSS is broken, IDK ?? It’s just a possible solution I found. We try to make the plugin compatible with as many themes and layouts as possible but you can’t get all.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Tags