Hamburger menu is not being triggered on the 1st click, but works on the 2nd click

Community resources Product feedback
1

This is my first project on webflow. Love the tool.

I was very close to finishing the layout parts of my project shown below, however, the hamburger menu triggering issue got me very frustrated. When I click on the hamburger menu, the menu icon has to turn white, the original logo has to go to 0% opacity and the white logo overlays on top of it with 100% opacity. The menu animation is just not being triggered on the 1st click, but only starts working after 2nd or 3rd click on IOS.

https://preview.webflow.com/preview/tenten1?utm_medium=preview_link&utm_source=designer&utm_content=tenten1&preview=22437b1a02bdc75274cc70caf794b889&mode=preview

2

Hey Teddy

Looks to me like there is a problem with your Z-indexes. Try to reset the Z-index for Menu Button, Navigation Pages and Logo Image white.
In the tablet breakpoint. Give Logo Image white and Menu Button the same Z-index. E.g. 200. Now give Navigation Pages a Z-index also, but remember to give it a value under the Z-index value of Logo Image white and Menu Button. E.g. 100.

This should mean that the nav menu overlay doesn’t transform over your menu button and white logo, making the animation look like it didn’t work

If this didn’t work then feel free to message me :wink: