Streaming live at 10am (PST)

[RESOLVED] Multiple Navbar Behaviors per Device


#1

While my trailing navbar works great in desktop and tablet mode, I want my menu button to remain visible and fixed at all times in both phone modes. How do I achieve this?

Thanks in advance for your assistance!


Here is my public share link: https://preview.webflow.com/preview/donnybrook-f90cf9?preview=663761dbd5d7356bbd4b29b32e1eb504
(how to access public share link)


#2

Hi @zac great question! The interaction is coming from this element:

To achieve the effect you would like I would make a symbol out of your Navbar element and copy it into another div block with a unique class name and update your interaction to only take place on that unique element class name.

Then set that element to not be visible on your mobile viewports under the display settings.

Thereafter, copy your Nav symbol into another div that sits fixed at the top of your page without any interactions and set it to only be visible on mobile viewports.

Hope that this helps! :bowing_man:


#3

@Waldo, I’m so grateful for the quick response!

I followed your instructions, however the interaction applied to the new div with my navbar symbol inside it, no longer works. What am I missing? I re-published, so the preview link should be updated.

UPDATE I had to set the height of the div I placed my navbar symbol in. Is there a way to have the div “fit to size” of its contents, or is a manual setting the only way?


#4

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