How to make section/anchor scrolling work with your sticky/fixed navbar
Memberscripts needed:
Tutorial:
Cloneable:
Why/Use Cases
- Improve UX by lining up the top of the section you’re linking to with the bottom of the navigation bar so they don’t overlap.
Make section/anchor scrolling work with a sticky/fixed navbar on a Webflow site
If you’ve ever used anchor links with a sticky or a fixed navigation bar, you’ve probably noticed that the website will by default line up the very top of the section you’re linking to with the top of your viewport. This means that the navigation bar will then overlap with the top of the section, thus hiding the beginning of the content in that section.
Thankfully, there’s an easy fix for this and we’re going to tell you all about it below.
To make section/anchor scrolling work with a sticky or fixed navbar on your Webflow site, we’re going to use MemberScript #138 – Anchor Link Scroll Offset. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
All you need to do on the site is add the following attribute to your navigation bar:
· ms-code-scroll-offset=”20”
With a value of 0, it will calculate the height of the navigation bar and offset the anchor point by that exact same number of pixels. However, that might not look too good, which is why we went with 20 – this will offset it just a bit more so it looks nice. You can use whatever value works for you.
Making it work
Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #138 custom code to your page, before the closing body tag.
Conclusion
That’s everything, you can now go ahead and test the country detection on your live site.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
Our demo can help you make section/anchor scrolling work with a sticky/fixed navbar on a Webflow site.
Take me to Cloneable!
Written by
Ovidiu
Contributor