Hi! I need some pro help solving this mystery.
I am building a mobile menu with a custom hamburger icon (3 divs).
The divs are placed inside the Webflow
Menu Button class.
I created 2 animations that are triggered using “Mouse Click (Tap)”. The animations turn the hamburger into an x when the menu is opened on 1st Click and returns to the hamburger icon on 2nd click.
When I test the Webflow preview or the published website on my laptop (in mobile view) the animations work perfectly.
However, when I test it on my iPhone (Safari or Chrome) the animation is not triggered on 1st tap, but on 2nd tap essentially showing the X as soon as the menu closes again.
Looks bad and doesn’t make sense to me.
What am I doing wrong?
Thank you in advance!