[Resolved] Jump Too Anchors Headings Covered By Stick Navigation

Home Forums Support Jump Too Anchors Headings Covered By Stick Navigation

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #887167
    Simon

    Hey guys,

    So I love the sticky navigation option, only I had forgotten that the huge issue with it is that when you use a link in say Table Of Contents to throw your visitor down the page, the headings are covered by the sticky nav leaving them wondering where the hell they are.

    I figure the easy solution here would be to add margins to the tops of all your headings that is more than the height of the sticky nav, but that seems messy.

    Is there another way?

    #887181
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    If you use our Smooth Scroll option (https://docs.generatepress.com/article/smooth-scroll/), it will automatically offset the sticky navigation to prevent overlapping.

    Let me know if that helps or not πŸ™‚

    #887670
    Simon

    Oh man I cant believe I was not aware this existed. Now i need to go back through 60+ pages and add it to all the links πŸ™

    This may sound dumb, but will this also work if someone clicks a link to an anchor on another site? Like from the google search results as an example? or will it only work if the person is already on my page?

    And is that how the wirecutter is doing it too?
    https://thewirecutter.com/reviews/small-bedroom-ideas/#why-you-should-trust-me

    #887738
    David
    Staff
    Customer Support

    Hi there,

    you can add the filter provided here, it will trigger the smooth scroll on any anchor link clicked:

    https://docs.generatepress.com/article/generate_smooth_scroll_elements/

    Smooth scroll jump links will only work if the user is on that page. Not much can do about external links being clicked through.

    Looks like a similar method being used on that site.

    #887805
    Simon

    Ummm WHA!

    This is awesome. Thanks so much David.

    Any thoughts on what I would need to do to get this to work for people coming from an external page?

    I and many others would have search rankings that link to the anchors, so they are used more than many people know.

    #887821
    David
    Staff
    Customer Support

    Tom adds filters to everything πŸ™‚

    Alternative is to do something like this with CSS:

    .product-review-item h3 {
        padding-top: 90px !important;
        margin-top: -60px;
    }
    #887955
    Simon

    Haha, he does.

    That is very smart, will have a play around with that and see what I can come up with. I am sure browser compatibility is going to kick me in the face.

    So I’ll have to turn off the smooth scrolling (otherwise I’ll have double spacing) and add the following, so it works with the other page anchors as well.

    h2 {
    padding-top: 60px;
    margin-top: -60px;
    }
    h3 {
    padding-top: 60px
    margin-top: -60px;
    }

    Any quick thoughts on issues the above may cause?

    #887963
    David
    Staff
    Customer Support

    Shouldn’t be any browser compatibility issues.
    One thing to be mindful of is margins collapsing. So an element above it that has bottom margins / neg margins may cause the space to collapse, but i can’t see that applying with your layout.

    #887969
    Simon

    Ah your awesome. Yeah I was keeping the margin collapse in mind. And I too didn’t see any issues with it. This looks like a REALLY good fix.

    It gives me some peace of mind that together we don’t see any major concerns, probably in like IE9 or something but I honestly don’t care about them folkes.

    Thank you so much for your help David, and you too Tomo. Always a pleasure.

    Cheers,
    Simon

    #888123
    David
    Staff
    Customer Support

    Glad we could be of help.

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