Streaming live at 10am (PST)

How to have a secondary nav show when main nav is not in view?


#1

I’m trying to get a secondary nav bar to show when the main nav has been scrolled out of view. For example: www.dazeddigital.com

I have watched the webflow tutorials but they are from an older version of webflow and I’m just confused lol.

Anyone know how to achieve a nav on scroll like Dazed Digital


#2

Hello!

This can actually be done pretty easily. Just set the secondary nav to position:fixed and top.
Like this:
efeaddfc017d51c41522ce4a01b117ce

Then pick an element that is a short scroll away down the page and give it a Scroll Into View trigger:
c47b815bf77f8efe2b25594ee9270d71

Set the initial state of the navbar to -60px on the Y-axis (or whatever height your navbar is):
a351564e46db871885d2f1c7f48400ab

Lastly, just set your first timed action back to 0px on the Y-axis. Play around with timing and easing a little bit to get your desired animation!

If you have any questions feel free to ask!


#3

Hey, thanks for the reply. What you have told me I don’t really have an issue with (I have tried that with a delay etc but it’s not a perfect solution)

The first nav is 96px so what I need is for the second nav to only show when someone has scrolled down the page 96px and also to hide when scrolling back up to the 96px (if that makes sense haha)


#4

I completely forgot about scrolling up haha. Well, forget most of what I said because it will be a little bit different. You’re going to actually place the Scrolled Into View trigger on the first nav bar. You will create 2 separate timed actions, in view and out of view, that will do what you are asking.

The Scroll Into View animation will have the second nav at -60px on the Y-axis

The Out Of View will give the second nav 0px on the Y-axis

This will make it so when the top navbar is out of view the second one will drop down. When you scroll back up to it it will move back up.


#5

Great! That works. Thank you :slight_smile:


#6

Awesome glad I could help!


#7

Ah wait haha. One issue with that. The second nav is initially showing when the page loads but as soon as I move the page it works correct.

How would I have the second nav to not be on show when the page first loads.


#8

Yeah I see… hmmm give me a couple minutes


#9

I Was being dumb/lazy lol… I sorted that :slight_smile:

Thanks Again for your help!


#10

Oh haha glad it worked out!