Streaming live at 10am (PST)

[RESOLVED] Mobile Nav | Unique Behaviors per Device

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

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

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.

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.

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?

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.

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.

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