[Support request] anchor links load behind sticky header

[drew]

I’m noticing that when an anchor link is used as an external link landing at the site, it loads the section at the absolute top of page, and therefore behind the sticky nav.

You can see it in action using this URL: https://morikamidev.wpengine.com/hours-admission/#service-animals

Is there a way to set the offset equal to the sticky menu height for sections using Custom IDs?

[Leo]

Hi there,

Have you tried using our built-in smooth scroll feature?
https://docs.generatepress.com/article/smooth-scroll/

It should take into account of the sticky navigation height.

Let me know 🙂

[drew]

It is activated but I’m not sure how that’s going to work when the client needs to use those URLs from outbound campaigns (i.e. these are not used as nav menu items). Suggestions?

[Tom]

Our script won’t work unless the anchor is targeted on the current page. If the user is coming from another page, the browser will take them to the anchor before any javascript runs.

Something like this might be worth playing with: https://stackoverflow.com/a/13184714

[drew]

Many thanks Tom, but how then would you recommend applying the anchor class so it applies the custom CSS to any instance throughout the site (via the stackoverflow article)?

[David]

Hi there,

looks like you’re jumping to the Section ID – which won’t work with the stack overflow method. That would require you adding the <a> link within the section.

The simplest solution would be to incorporate some more top padding in the Sections so as the content doesn’t slip under the nav.

[drew]

Well hmmm, that’s precisely what I was hoping to avoid as it would mean creating design inconsistencies. This creates a real problem on my end so I’m open to suggestions here.

[David]

The only alternative is to create a jump link as provided in the stackoverflow eg.

<a class="anchor" id="top"></a> for each of your sections then you position it how you need.

[drew]

Many thanks David, and that seems to circle around to the problem with that solution not working when the URL is used in a marketing or social media campaign (correct?).

[David]

I am not sure what the outcome would be depending on whether the page has rich snippets / open graph. My preferred solution is to increase the padding. You can test out whether a large padding works using this CSS – it will apply to all sections:

.generate-sections-container {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

[drew]

Good idea David, I’ve done that on other installs and the downside is it overwrites any manual settings. I think we’re going to end up having to use a JS based solution; to that end, my programmer figured out the following snippet works when inserted into a wp_head hook element and applied to the entire site:

<script>
    jQuery(document).ready(function() {
        var hash = location.hash;
        var offset = jQuery('body').find(hash).offset();
        if (!offset) return;
        var scrollto = offset.top - 200; // minus fixed header height
        jQuery('html, body').animate({
       scrollTop: scrollto
    }, 300);
    });
</script>

[David]

Awesome – glad to hear you found a solution, and thanks for sharing.

[Author]

Posts