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.
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.
A GIANT thank you for this! I needed a solution that didn’t require creating a separate offset div anchor since my menu has current link states set. So, whenever I put the ID on a div instead of a section, the current link state was no longer showing as an option. This solution helped me so much!