Hamburger Menu Animation with Mobile Menu

Hi Guys, I am currently facing an animation problem with my hamburger menu and the menu that slides in.
First how it should work:
Pressing the hamburger, changes into an X and the menu opens. If you press one of the menu links the X changes back to hamburger and so on. But I have two main problems:

  1. The hamburger doesn’t always react when pressing on mobile.
  2. If I press one of the menus links the menu closes and the hamburger goes back to the initial state of hamburger but the second click is not made on the hamburger. Which causes the problem that I have to press twice on the burger to open the menu and start the hamburgers animation.

Maybe somebody faced the same problem and can help me with that thanks!

Here is my public share link: pk-emmen.webflow.io/startseite

https://preview.webflow.com/preview/pk-emmen?utm_medium=preview_link&utm_source=dashboard&utm_content=pk-emmen&preview=4d54852ed1fc4084245a96577754ca19&mode=preview

1 Like

Don’t use a mouse click trigger for hamburger menus. The second click is usually on the navlink or outside of the navmenu so the animation doesn’t reverse as intended.

Instead, add the interaction to the navbar itself. Use the “Navbar opens” trigger. This will solve your problem.

3 Likes

Hi @marcomedia

This is a common problem of many webflow users at the moment. But there is a work-around for this:

you can create a second (invisible) div over the hamburger button that gets activated when you open the menu. Here’s how you can do that:

  1. create a div inside the “Menu Button” and set it to position absolute (full width & height), set display:none and set the z-index to 1.
  2. Then you go to the interactions of the “Menu Button” and disable the second click. Then go to the first click and create a new action that sets the new div to display: block.
  3. Go to the div you created and set the interaction to close the menu. In this interaction you add a new action that sets display: none to itself.
  4. Do the 3rd step for all menu buttons (Formulare, Über Uns, Kontakt).

I hope I could help you with that.

Thanks for your answer! The idea helped to solve the problem to the half :smiley: I am not sure but in my webflow project the display set to hide doesn’t work… I had to use your solution with moving of the div out of the window instead. I think I had this problem with hide/show already in an earlier project and not sure if its me doing something wrong or if its webflow which doesn’t work in the hide/show function.

But thanks anyway for your help!

1 Like

Hey man
Glad I could help you! It seems to work perfectly. Though if you want to have a “cleaner” code, I would suggest you to use hide/show since it needs less power of the mobile device to load the animation.

Its weird that the hide/show function doesn’t work for you… I never had any problems with it.
Maybe you missed one of the following settings:

  • Do not set the animations action to “initial state”
  • Choose the right target for the animation action.
  • Set display: none in the Styles-panel

If you want I can have a look at the share-link where you tried to get it to work with hide/show.

1 Like

you rock man!!!..i never found this info anywhere and is pretty cool!!!

This! I didn’t realise how to do this until I looked for the trigger while having the Navbar element selected.