Streaming live at 10am (PST)

Set where anchor link stops


#1

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: https://preview.webflow.com/preview/stce?utm_source=stce&preview=bf2f1a4e6ba8a5c46a5cf38646b26f35


#2

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?


#3

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.


#4

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


#5

Very famous problem/topic (Fixed header menu overlaps anchors).

google it (“offsetting-anchor-links” and ideas like this) - you will find endless ideas and tricks. Some examples:

https://pixelflips.com/blog/anchor-links-with-a-fixed-header