Streaming live at 10am (PST)

Set where anchor stops on page

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

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

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

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

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.

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).

Solution her (The navbar not be nested inside another element)

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

1 Like

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.

This doesn’t fix the issue for me. Still scrolls past.

I was having a similar issue with a sticky menu and anchors. I found a “solution”. I gave the div block that the nav link is anchored to a negative top-margin and a positive top-padding (-100 top-margin and 100 top-padding). This offset the height of my nav menu, which is 100px in height. The only problem now is that I can’t have a “current” style to the nav menu links, because they aren’t recognizing the correct anchor that they are on.

3 Likes

You need to adjust JS and CSS to achieve this requirement.

Hi guys, I had the same issue with a Navbar scrolling past the set anchor when set to position:sticky.
Had to change it back to position:fixed to solve the problem! When setting the Navbar to position:fixed the header will not be offset by the Navbar, as it would be with a sticky element. To avoid parts of your header to disappear behind your Navbar, give the header a top-margin of the hight of the navbar. I created a new combo class to easily achieve it on every page.

2 Likes

That solved it. Thanks!

1 Like

hi, i used the same workaround and i have the same problem with current state, but i can’t set it as fixed because is not the navbar but a div inside a section so have to be sticky
did you resolve?

Hi,
Since I have an unusual navbar and I didn’t use a ready-made component, I had to find a different solution. I add a div (Position: Absolute and Width: 100%) to the section and give it an ID instead of a section. The navlinks then link to it, not the section. This allows me to manipulate with the div’s negative margin and this way I can give an offset.

1 Like

I found another workaround that works form me.
I added a div(called Anqor-point) to the section that i wanted to use as in page anqor point. I gave the div a width and hight of 0px, a position absolute, and gave top a value of -150px. I added the ID to the div, and made the linking button connect to this div ID.

Little bit of a hack/workaround… but works like a charm for me!
Hope this helps anybody :wink:

Just wanted to to say thanks for this comment! It solved my exact problem since I have an oddball nav too :sweat_smile:

1 Like

Hi there @JustJoe and others, as a note, there are some rules regarding smooth scrolling and getting sections to align when using fixed elements: Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation

Sticky position should not be used directly under the body, rather place a div or section between the sticky element and the body, and put the content you want the sticky to be fixed and visible in that div or section wrapper, including the sticky element.

I hope this helps :slight_smile:

1 Like

Happy to read that! :wink: