Streaming live at 10am (PST)

[RESOLVED] Mobile Nav | Unique Behaviors per Device


#1

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!

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


#2

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:


#3

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.


#4

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.


#5

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?


#6

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.


#7

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.


#8

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