Set where anchor stops on page

[JustJoe]

I have a sticky menu on my desktop view and links to some anchors on a page. When I click on the link, the heading ends up below the sticky navigation. How can I set where the anchor stops on the page? The section anchor links are on the Guests page of my site.

---

Here is my site Read-Only: https://preview.webflow.com/preview/gacc?utm_source=gacc&preview=6424d08a78d172753a58551be4151106

[DFink]

In the navbar settings there is a checkbox that says offset sticky nav.

[JustJoe]

I only see “Disable scroll offset when fixed” and I checked that checkbox but it didn’t make a difference.

[Siton_Systems]

Its hard to understand your problem - you talk about this issue (overlap)?

[JustJoe]

Yes, I want the anchor to stop where it shows the heading. I adjusted the distance for the sticky nav to show some of the text but I’d prefer for all of the nav to show and it to stop where all of the heading shows.

[Siton_Systems]

Use relative urls

Out of topic - use relative urls (Not absolute).

Not
https://www.ticketmaster.com/greater-austin-comic-con-tickets/artist/2427387
But
/greater-austin-comic-con-tickets/artist/2427387

Like this all of your links will work also on staging (.io).

[Siton_Systems]

Very tricky idea. I hope webflow will add “offset” attribute (Beacuse its really tidy each time to solve this manually).

Related:

Customize Webflow Scrolling Offset

Google it. You have a lot of tricks for Offset of anchors. In my opinion the easiest way is link to anchor with top padding and thats it (its like "offset" for the user - and the nav wont hide the text). If you want another offset for one specific case try to use negative margin in this section. Or relative with negative. Her you find some tricks: https://www.itsupportguides.com/knowledge-base/tech-tips-tricks/how-to-offset-anchor-tag-link-using-css/

Another very not “clean” solution (But will work fine) is to create extra div with offset (And link to this “offset”)

Tutorial her:

Linking to a section on a page with sticky navbar

Unfortunately it does not solve the problem. I if you go to this page, for example: https://hollestudio.webflow.io/projects/hagar-eilam and then click the X round button to go back to all projects, the problem remains.

Or Try this:

I never try this.

10. The smooth scroll to an anchor link doesn’t stop at the bottom of the navbar

Top 10 most frequent solutions — inb4, Webflow Tips & Tricks

[JustJoe]

I don’t understand why exactly but I was forced to put the nav bar inside of a div. When I’d set the navbar to sticky it would say that I needed to set the Body to relative position but then the position for body could not be changed. I put the nav bar inside another div and set that div to sticky and it worked. When I turn on the checkbox for offset sticky nav but it doesn’t change anything.