Streaming live at 10am (PST)

Help Showing Modal Nav


#1

Can anyone help me take a look at this? For some reason I can get only one of these nav bars to show the full-screen modal nav for mobile that I have created.
The reason for the two navs is that one is sticky and one sits as the ‘main’ nav; they should both animate the ‘mobileNav’ but for some reason only the ‘fixedNavBar’ works. I’ve used separate animation for each nav just to see if that was causing any issue, but they are the same animations.

If you go to tablet or mobile view you’ll be able to see the mobile hamburger menu show.

See Page 'NavBarTests’
Share Link: https://preview.webflow.com/preview/oe1-test?preview=52081ad6abc7adbbaf5d22cb6518e45b

Example Page: http://oe1-test.webflow.io/navbartests

Thanks in advance!


#2

What is activating the nav interaction? Which element is the interaction set on? On the nav bar, the hero section… or?

Also, why did you need 3 nav bars? Why the extra mobile nav bar?


#3

Thanks for the reply @garymichael1313!

There is a div in each nav bar that the interaction is tied to. The fixed nav on the top of that page: “mobileOpenFixed” and the nav bar below the div class is “mobileOpen”

First nav is a ‘regular’ nav bar that sits in a hero image on each page. The second nav bar is a sticky nav that will show once the user scrolls down. The 3rd nav is for mobile only when the hamburger menu is pressed. I created my own because I wanted the mobile nav to be fullscreen…are you suggesting I should just be styling the mobile nav Webflow comes with and could achieve the same look?

Thanks!


#4

Yes for sure, don’t create a separate mobile nav, that’ll be too much. You can make the nav stretch full screen. Oh you mean, full screen because the nav has an inner container, which only goes 960? If that’s right.

Yeah just use 2 navs - one scroll and one static. They both can be used for other devices. Just adjust them in that device screen, not in Desktop view. I hope that make sense.


#5

Thanks. I had created my own nav for mobile because I wanted it to look like the attached image (covers up everything, using flexbox to always be centered horizontally and vertically on device).

Are you saying this should be possible by customizing the ‘stock’ mobile nav? If so I’ll put some work in to see if I can get that done.


#6

Yep, it will do the same from the native nav, it just decreases size. Now if you keep your links inside that container it may cause issues. I usually take everything out of that. Then everthing will Block and line up to left. But you don’t need that brand block. So delete that. You’ll have the links. Delete all but one. Make the navbar Block and align the link to far right with typography settings if you need to but, they usually align to right for you.


#7

Appreciate the video @garymichael1313! This makes sense…I’m still struggling to make the mobile nav cover up/fill the entire screen regardless of the device’s size. I tried changing the ‘Nav Menu’ Position:Fixed - but it then covers up the close button when the menu is open.

I was able to get this working on my custom one…but then I ran into that initial issue I mentioned about the animation not triggering.


#8

Turns out the issue I was having initially (where only one of the buttons was triggering the Animation) was a bug…as confirmed by the support team.

So I’ve gone a different route and am going to use the native nav element and customizing it to look like I’m wanting.
Which is on this thread: Help creating full-screen mobile nav


#9

Ah I see, good deal, good luck the rest of the way.