Streaming live at 10am (PST)

Set where anchor link stops

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

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

1 Like

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

Webflow comes with build in solution (By default):
image

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:

2 Likes