Mobile menu interaction only works one time

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

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:

1 Like

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

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

1 Like

Hi loren,

Could you share with us how you fixed this as I have the same issue.

Thanks!

Dylan

The advice up above was to make sure your opacity is set correctly. But the second issue was position. It’s tough to say it if you want to post your share link I can take a look.

Hi Loren, thanks for the reply!

please find the link bellow, also please refer to mobile portrait as thats the only view ive edited the menu so far. Also here my actual site so you can see on your phone.

weareseams.co.uk

https://preview.webflow.com/preview/weareseams?utm_medium=preview_link&utm_source=designer&utm_content=weareseams&preview=c091c3dc6b0418152173fa874e411647&workflow=preview