Unable to style "current" state for nav links

I am creating a one page site. The navigation uses anchor links to scroll to different sections on the page. I have the anchor links scrolling to the exact position I want them to. Since you can’t control this natively, I have added a blank div with a height of 0 px. and relative positioning. Then pushed it -80 pixels up the page. I then set that as the section ID that I will link my nav link to. Basically I am hacking the anchor links to start 80 pixels above where they normally would. The trouble is that since my section ID is set to a section with 0px height, the current state does not activate. So I cannot style the active state of the links in my navigation.

  1. Does this make sense
  2. Can you think of a fix

Thanks!!

Here is my public share link: Webflow - Uniform Strategy

Hi Chris,

Try putting the ID back on your main section, so that the content area is detectable by Webflow’s nav scripts. Then to offset the top to evade your sticky nav, set the section’s top margin to -80px and the top padding to +80px.

That will still offset the top for the browser’s anchor scroll, but also keep your content area intact for the Webflow script detection.

https://section-scroll-1ea707.webflow.io/

1 Like

Thank you so much Michael! This worked!

1 Like