Streaming live at 10am (PST)

Mobile menu interaction only works one time


#1

I’m having issues with some mobile menu concepts I’m working on. When you click the hamburger button the menu comes in just fine. It also closes the way I want, but after that the menu button no longer works. Any ideas what I need to do different?

** Mobile prototype only **


https://preview.webflow.com/preview/menu-explorations-2dec112-5771c9500ba6b?preview=ca7ab92a9750f47fc6f4237b3ce00520


#2

Hi @lorentracy

I have a partial fix for you!

The menu is opening and closing, it’s just not showing the elements due to opacity issues.

In the Menu Close animation you have set:

  • Mobile Menu Background and Mobile Menu Container to Opacity 0%

  • However in Menu Open there is no returning that to 100%

So add a 100% Opacity to both those elements in Menu Open and you should see the menu open and close again.

As I say - partial fix, once you’ve got that working, it looks like you need to check settings for the nav items which on second open appear abruptly rather than sliding/opacity. They likely need a ‘closing’ opacity added, something to return their animated state…

I’m happy to look further if you get stuck :slightly_smiling_face:


#3

Thanks again for the help! I got it working in this much simpler version. I’m going to try to start adding in the other elements one by one and getting it together.

Would you happen to know why in this version the “Menu Background” which is animating in with “linear” looks super jumpy? I’ve noticed this with a few things I’ve tried building. Any idea what could cause this? The same element has the same animation on close but seems to work as expected. Thanks!

https://preview.webflow.com/preview/menu-explorations-2dec112-8f64c850fbeb4?preview=d740bb3802fa083e8be3add34f5e22f7


#4

I figured that issue out. I had the initial state moved to the right 100% but animating to 0px.