In-page Scroll Anchor based on Sticky Navbar: Webflow Tutorial

In ‪@Webflow‬ if you have a sticky Navbar and need the navlinks to scroll down to an in-page link, you may notice it scrolls a bit too much and doesn't factor the height of the Navbar. In this video I will explain everything and provide a solution.
📚 Time Stamps:
Intro / Problem: 0:00
More Explanation: 0:31
Solution: 2:35
Mobile Responsiveness: 4:48
Closing Statement: 5:30
📢 Connect With Me
Website: www.dereksiu.com.au/
Fiverr: www.fiverr.com/dereksiu
👇 Affiliate Links:
Hire a Freelancer on Fiverr: fiverr.grsm.io/k8bhq1js4hmx
Try Webflow: webflow.partnerlinks.io/4brsn...
Have questions or suggestions for future tutorials? Leave them in the comments below! Your feedback is greatly appreciated.
--
Peace!
#Webflow #Scrollanchor #stickynavbar #WebDesign #Tutorial #F'inSweetScrollbarStyler #ChromeExtension #UXDesign #WebDevelopment

[@dab299]

This works well, but it has broken the current state of your links. At the start of the video, the links are highlighted when at the different sections, but after adding the scroll anchors, this no longer works. Is there a way of keeping that styling?

[@dereksiuau]

That is a fantastic point in your case this won't be the best option (unless you add negative padding). That being said you can also make your Nav position "Fixed" and not "Sticky". Sticky just really factors the height of the nav. But by making it Fixed you will need to compensate the Hero section (ie. adding additional top padding/margin).
^ The above is just ONE alternative fix to your problem as you know code has many solutions. Hope this helped :)