Mystery! Custom Burger Menu animation isn't triggered until second tap

Community resources Product feedback
1

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?

Read-only Webflow link here
Test page for seeing the real issue on an smartphone: Test page

Thank you in advance!
J :slight_smile:

2

Mine is doing this too. Did you find a fix?

3

No, I didn’t :frowning:
Currently I’m just dimming my burger icon on the open menu state.

If anyone could give a hint, it would be greatly appreciated (now there’s 2 of us looking for an answer).

4

Did you ever find a fix to this? Mine is doing something similar - works fine in the designer preview but in the share preview it’s only clickable after refreshing the page.