[RESOLVED] Mobile Nav | Unique Behaviors per Device

[zac (Zac Lazare)]

Currently, I have a trailing navbar that works very well on desktop and tablet viewports, however…

1. I want my navbar to be visible and fixed on phone viewports
2. On those viewports, I also want the navbar container to render with a solid fill when opened.

How do I achieve this?

Thanks in advance for your help!

http://donnybrook-f90cf9.webflow.io/

https://preview.webflow.com/preview/donnybrook-f90cf9?preview=663761dbd5d7356bbd4b29b32e1eb504

[johnwilliamdev (John Carter)]

Hi! I fixed the issue. Follow these steps!

Select the Nav Menu Div Block that contains all of your links. Change the bottom positioning to the value 0.

I made this same change on the FixedNavBar block. Not sure if you need both.

Try it out and let me know if it works for you!

[zac (Zac Lazare)]

Thanks @johnwilliamdev. That extends the NavMenu downward, but I want the FixedNavBar to be filled with the same color when the MenButton is clicked.

Thinking that applying an interaction to the FixedNavBar might do the trick. I’ll keep trying.

[PixelGeek (Nelson)]

if you’re looking for a interactions based on breakpoints, that feature isn’t ready yet. It’ll be part of interactions 2.0 which is coming soon.

[zac (Zac Lazare)]

Thanks @PixelGeek, I’m not sure if that’s the best approach. Can you provide any potential hacks to get this working the way I want it to…or at least close?

[zac (Zac Lazare)]

I’d be satisfied with the FixedNavbar being fixed and visible on both Phone viewports while maintaining the way it currently works on Desktop and Tablet viewports.

[zac (Zac Lazare)]

Not perfect, but does the job. It came down to duplicated my Navbar and creating a new class for it so that my trailing navbar interaction wouldn’t affect it.