[Support request] anchor links load behind sticky header

Home Forums Support anchor links load behind sticky header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #991089
    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?

    #991091
    Leo
    Staff
    Customer Support

    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 🙂

    #991093
    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?

    #991229
    Tom
    Lead Developer
    Lead Developer

    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

    #991543
    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)?

    #991680
    David
    Staff
    Customer Support

    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.

    #991710
    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.

    #991713
    David
    Staff
    Customer Support

    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.

    #991715
    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?).

    #991771
    David
    Staff
    Customer Support

    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;
    }
    #991786
    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>
    #991944
    David
    Staff
    Customer Support

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

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