Webflow Menus & Navigation

Sticky Nav + In-Page Scrolling

No items found.
Overview
Navigation Bar
Sticky Nav + In-Page Scrolling
5:45
200
Menu Item Styling
Underlined Menu Items
5:45
201
No items found.

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.

More Solutions

https://discourse.webflow.com/t/linking-to-a-section-on-a-page-with-sticky-navbar/78288/6

Notes

https://www.w3schools.com/cssref/css_pr_scroll-margin-top.php

Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.