I’m creating anchor links on my home page for different sections. Is it possible to set exactly where the anchor link stops when the browser glides across the page? For instance, I set some h2 tags as the anchors and with the nav bar set to fixed, when the browser scrolls down to that anchor, it tucks in a bit under the nav bar and I want to create some distance between the nav bar and the headings.
Here is my site Read-Only: Webflow - STCE 2022
It actually looks good on my monitor (might be because it’s quite a big monitor - screenshot below)
But if you want to make more space between e.g. the Guests header and the bottom edge of your nav, you can try adding top padding to the header?
I ended up setting the anchor on the div block vs the heading and adding some top margin to the heading. I wasn’t sure if I should delete my post though so I just let it be.
Yea probably either delete, or better put how you found the solution so if someone has the same issue they’ll be able to learn by searching and find your post instead of creating a new one
Very famous problem/topic (Fixed header menu overlaps anchors ).
Webflow comes with build in solution (By default):
If webflow setting is not enough - you could use custom code:
Google it (“offsetting-anchor-links” and ideas like this) - you will find endless ideas and tricks. Some examples:
For anyone having this issue in the future, I’ve just made this solution which calculates the height of your nav and then treats it like the bottom of your nav is the top of the page!
There’s a cloneable, a video tutorial, and a code snippet - here’s the link where you can get them all (for free obvs)! :)
Hope this helps at least one of you!!
