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.
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.
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
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.
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.
That solved it. Thanks!
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.
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 
Just wanted to to say thanks for this comment! It solved my exact problem since I have an oddball nav too 
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 
Happy to read that!
