Sticky Nav + In-Page Scrolling

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

1. A standard Navbar component
2. An element with a class named header or Header
3. 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

‍