Streaming live at 10am (PST)

Sticky navbar under a section


#1

I’d like to make a navbar menu which is positioned under a section (position: auto) but will get sticky when scrolled down (position: fixed). Is there a way to do this without JS? I thought about making two menus (one auto and the other fix to top) and use interaction to make them show/hide, but then I’ll have two different menus, which is not nice. Any better idea?

Thank you, Asaf Lupo

https://preview.webflow.com/preview/codeocean-blog-7c19bb?preview=f6e7969d662abf6b71a2df8a37f8ee17


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

You can use 2 menus, that’s not a problem. It’s not uncommon, so you’re on the right track. There are a number of ways to accomplish it. But I would use 2 menus, with 1 starting 0%, etc. of course. Let’s say you have these menus as symbols and you want to create the interaction. The interaction can’t be on the symbol, so you use the hero section and affect the hidden menu only, on a simple scroll into view/out of view, and you’re done. Now when you go to another page, if you use Legacy interactions, you simply add it to another section.

Honestly, this process is a personal preference on the maintainence, location of section interaction, etc.


#3

Hey @LupoAsaf

Personally, I think using something like sticky js is more elegant than having two navbars:
http://stickyjs.com/

You can see more detailed instructions here - https://github.com/garand/sticky


#4

Thank you both very much! :grinning:
@garymichael1313, @Filipa


#5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.