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;
Both are nice.
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.
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;
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.