Streaming live at 10am (PST)

How to override default interaction on mobile nav button?


#1

I’m currently trying to make a mobile menu button that has the page nav menu scale up from the menu’s bottom right corner when the nav menu button is clicked.

The interaction works when I view it in the webflow designer, but when I preview or publish the page it reverts back to sliding the menu out from the side of the screen and shifts where the menu actually shows up (shifts it down).

I have no idea why that’s happening, so any help here would be much appreciated!

Here is my public share link: LINK

Click on the “weddings” page and make sure you’re viewing the tablet view. To view the interaction that I’ve got working in the designer mode, make sure the menu is “open” otherwise the interaction can’t be previewed. (Perhaps that is part of the issue??? I haven’t the faintest. SO stumped!)

Thanks in advance!



#2

Hi,

When you want to completely customize how a navbar behaves for mobile devices, the best is to start to deactivate completely the automatic transformation to hamburger menu that webflow proposes.

Now you’ll build your mobile navbar menu completely custom and you won’t be colliding with WF default for mobile navbar.

You can check an example of that on my my “responsive Navbar template”.

It may represent a bit more work than your previous solution but again, you’ll avoid collingind with defaults.


#3

Ahhh, ok. Thanks! I thought maybe I was missing some way to turn that off automatically. Glad I didn’t get too much further building it out before finding out about this - much appreciated!

ETA: Worked like a charm - thank you again! :grinning: :raised_hands:


#4

Great :smiley: You’re quite advanced now if you can pull that up!


#5

Nifty - thank you! :smiley: