Streaming live at 10am (PST)

Sticky Subnav and Section Scrolling

I am having an issue with navigating to a section within my project. I have created a sticky subnav on this page:

However when I click on one of those nav links the sticky subnav overlaps the section and so it scrolls too low.

Is there any way to get around this?


Here is my site Read-Only: LINK

use padding or margin for the elements so you can compensate the subnav height. The auto scroll function puts the element at the top of the page, and the browser doesn’t really “know” that the navbar is occupying that space.

If I use padding it adds about 75px of spacing that I don’t want. Everything looks too spaced out.

Give paddings on the top for the sections, and give them a negative margin for the bottom. I did that with your website and it worked flawlessly.

Hey Jean! Thanks for your help. I came across this solution earlier and I actually like it for the most part EXCEPT (and this is really nitpicky) that since the sections cross over each other, there’s moments where on the subnav two items are highlighted because they are both considered to be “current” nav items.

I can totally live with it, but was wondering if there is another solution out there.

I don’t really think that Webflow provides you with a built-in feature for that. You can try that with custom code if you wanna avoid the overlapping issue:

Roger that! Thanks for your help. It would be awesome if Webflow treated the Sticky attribute the same way that they treat a fixed nav, so that the new top of the page is automatically just below the sticky item. Has anyone else requested this feature yet on the wishlist?

1 Like