Streaming live at 10am (PST)

Can someone explain how to do this navbar trick?


#1

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: https://interactions.webflow.com/fade-in-navbar-video

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)


#2

Hi @William_Rodriguez

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


#3

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?

https://interactions.webflow.com/fade-in-navbar-video


#4

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.


#5

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!!


#6

Well, you will have to "fix" interaction a little bit.

First part of interaction (Scroll in) better to divide into 2 separated steps:
1) make nav move up
2) make nav display:none

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


#7

Hooray, you saved the day! :gift_heart:

SUPER THANKS!!


#8

Coolio :smile: Glad I could help!


#9

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