Problem with anchor links and header menu

  • Imagewehoit

    (@wehoit)


    5 months ago

    Hi –

    I know that when I scroll my page, it rolls underneath the header menu – which I like.

    However, this is a problem for anchor links.

    If I add anchor to a main Group, and then link it, when I click the link the Group ends up underneath the menu because it scrolls to the top of the window (which is under the menu).

    How can I get an anchor link to stop at the bottom of the menu, and not the top of the window?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author ImageRavi Gadhiya

    (@ravigadhiyawp)

    5 months ago

    Hi @wehoit

    Thanks for reaching out, and I’m glad you like the sticky header effect!

    It generally happens when a page uses a fixed or sticky header, as the browser scrolls the anchor target to the very top of the viewport, which causes the content to appear hidden underneath the header.

    You can fix this by adding some scroll padding to the page so the scroll position stops just below the header. This ensures that when you click an anchor link, the section will be positioned just below the header instead of being hidden behind it.

    Hope that helps!

    Thread Starter Imagewehoit

    (@wehoit)

    5 months ago

    Hi Ravi –

    Thanks for responding.

    I was wondering if there was another way to do this as I had already added a Spacer block to achieve this. I’m assuming that’s what you mean when you write “scroll padding” ?

    I was trying to find out if there was a more technical/precise way.

    Theme Author ImageRavi Gadhiya

    (@ravigadhiyawp)

    5 months ago

    Hi @wehoit

    Adding a Spacer block is one way to create room below the header, and it works fine visually.

    However, the scroll-padding-top approach I mentioned is one other solution and it adjusts the browser’s scroll behavior itself, rather than adding extra space to your layout.

    More about scroll-padding css property : https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scroll-padding-top

    Hope this help. Thank you.

    Thread Starter Imagewehoit

    (@wehoit)

    5 months ago

    Let me be more specific – I added a spacer to the previous block (above where I need it to anchor) and then adjusted the spacer height. However, regardless of the height I set (px, %, vh, etc.) it varies from PC to mobile.

    Is there a way to get the top of the desired block block to stop precisely at the bottom of the menu/top of the anchor for PC, table, and mobile?

    Theme Author ImageRavi Gadhiya

    (@ravigadhiyawp)

    4 months, 4 weeks ago

    Hi @wehoit

    Thanks for clarifying that. Based on your explanation, it sounds like a custom JavaScript/jQuery solution would be the most reliable approach in this case.
    We can dynamically calculate and adjust the spacer block height so it aligns perfectly across all devices, regardless of screen size.

    If possible, please share the website URL so I can review the setup and provide an exact working solution.

    Thank you!

    Thread Starter Imagewehoit

    (@wehoit)

    4 months, 4 weeks ago

    I can’t provide a link as it is currently in dev on my PC (using WP Local and Live Link)

    However, I was able to use this code to resolve the issue:

    /* mobile */
    html{
    scroll-padding-top: 160px; /* Adjust this value as needed */
    }
    /* desktop */
    @media only screen and (min-width:769px) {  html{
    scroll-padding-top: 150px; }
    }
Viewing 6 replies - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.