Sticky navigation refers when to the nav bar "snaps" to the top of your page, and is always visible, even as the user scrolls down the page.
It's popular among designers as it makes navigation easier- however it presents a challenge with Webflow's in-page navigation.
Webflow's in-page navigation requires that you use Section elements, with unique ID's. It will then recognize them and make them available in the link menu, along with two cool effects;
- Smooth scrolling when you navigate to a section
- A current nav styling when you've over that item
Both are nice.
Problem: The Overlapping Sticky Nav
However this presents a problem where your sticky nav might overlap your section significantly. This is because the browser navigates directly to the very top of the sticky nav, and that brings it underneath your sticky nav.
I’ve never found a solution for this that I really like.
CSS has scroll snapping support, which is probably the best approach, however it affects manual scrolling as well.
Here’s a hack I use to adjust the scroll-to position so that you have an offset.
Another option is to use javascript, and calculate the offset you want.
However, webflow.js also uses javascript for its scroll-to-section feature, which controls the speed of the scroll, and changes the nav current item indicator.
Solution
To fix this, we want to change where the browser sees as the "top" of the section, and shift the display content accordingly within that section.
Let's assume all of your scroll-to sections have a class name of Section, and that your sticky nav is 120px tall. We want the top of our content to appear at 200px.
Here's the technique;
- Set the top margin of each Section to -200px
- Set the top padding of each Section to 200px.
This will technically adjust where the browser things the section starts, but visually, it will be in the same place.
From the browser's perspective, your section is now -200 higher on the page and on top of other elements there. If you're obscuring any buttons or elements, you'll want to give that button panel a higher z-index.
If your sections have background styling, you can avoid shifting that background styling by separating your classes. Use an outer DIV for the navigation id, and for the Section margin + padding. Use an inner DIV for your background and content.
Fixed Navs
For fixed navigations, Webflow actually has a built-in feature for auto-calculation of the scroll offset. It identifies the header, measures its height, and offsets.
To identify the header it must be directly inside the body as the first element, with no wrapping element.
It can be
- A standard Navbar component
- An element with a class named
headerorHeader - An element using the
<header>HTML5 tag
More notes from Vlad;
https://discourse.webflow.com/t/getting-webflows-smooth-scroll-script-to-align-correctly-with-fixed-headers-navigation/3459?u=memetican
More Solutions
https://discourse.webflow.com/t/customize-webflow-scrolling-offset/44122
https://stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
https://discourse.webflow.com/t/override-fixed-navbar-scroll-offset/9425/2
https://discourse.webflow.com/t/link-to-page-section-with-fixed-top-navbar-how-to-define-offset-value/97421
https://www.itsupportguides.com/knowledge-base/tech-tips/how-to-offset-anchor-tag-link-using-css/
https://discourse.webflow.com/t/setting-scroll-offset-with-sticky-navbar/92189
https://discourse.webflow.com/t/linking-to-a-section-on-a-page-with-sticky-navbar/78288/6
Demos;
https://vertical-nav-menu.webflow.io/sticky-navbar-with-offset
Notes
https://www.w3schools.com/cssref/css_pr_scroll-margin-top.php
FAQs
Answers to frequently asked questions.
