I want to learn how to create a top navigation bar where it hides when you scroll down and then a different navbar shows up. Like here: https://interactions.webflow.com/
I understand there is a tutorial kind of explaining it here: Website interactions and animations | Webflow
but it doesn’t explain how they created two navbars, one under the first navbar.
Please steer me to the right place, thank you!!
Here is my public share link: LINK
(how to access public share link)
You simply drag and drop 2 navbars to your site page. One of them style as “regular” navbar and another as “sticky” one.
Cheers,
Anna
Thanks, Anna!
Can you tell me why is in this video you can only see 1 navbar, and the second one is underneath? How do I get to do that?
The second navbar has position: fixed, and aligned to the top of the screen. Elements with fixed position are always will “cover” elements with position “auto” or “relative”, unless “relative positioned” elements will have z-index higher than “fixed positioned” elements.
Your “fixed/top” alignment explanation helped, thanks!
The navbar is hiding after scrolling down and the other navbar appears, great.
But, when I scroll back up the second navbar doesn’t slide up smoothly, it disappears abruptly. How can I make it scroll up smoothly?
I shared my test page just in case you wanted to look at it.
https://preview.webflow.com/preview/test1-d5e5d8?preview=24b48597d1a442fdcb17a83b49cd152e
MANY THANKS!!
Well, you will have to “fix” interaction a little bit.
First part of interaction (Scroll in) better to divide into 2 separated steps:
And remove tat last part (with the clock icon), it sets waiting time. (Unless you want to use “waiting” step in the animation)
At the end it will look like this
Hooray, you saved the day! 
SUPER THANKS!!
Coolio 
Glad I could help!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.