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 )
sabanna
(Anna)
February 18, 2016, 6:20pm
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
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?
Website interactions and animations | Webflow
sabanna
(Anna)
February 18, 2016, 6:38pm
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.
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!!
sabanna
(Anna)
February 18, 2016, 7:22pm
6
Well, you will have to “fix” interaction a little bit.
First part of interaction (Scroll in) better to divide into 2 separated steps:
make nav move up
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
1 Like
Hooray, you saved the day!
SUPER THANKS!!
1 Like
sabanna
(Anna)
February 18, 2016, 7:33pm
8
Coolio Glad I could help!
system
(system)
Closed
April 19, 2016, 4:33pm
9
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.