Hey! I created a custom animated burger icon using interactions within a default navbar symbol but for some reason the first click is not changing the icon state when viewed on my phone.
The weird thing is that It appears to work fine when I tested it from my laptop in Webflow preview mode across device breakpoints, and even when inspecting different devices on Google Chrome.
But when i view the live site on my iPhone 5SE clicking the burger icon triggers the dropdown menu but the burger icon doesn’t change. Clicking again to close the menu does trigger the burger icon to change. It appears the first click isn’t being recognised but I cannot recreate this in preview mode within webflow.
It looks like you have an issue with your interaction - you should open it up and play around with the options that tlk about which elements each step affects - you should be using some sort of “class effect” option - and don’t use the “affect trigger” option - I can’t really test it out since i can’t publish the site and it all works in preview but I do think its some type of issue there… also if you have any elements of the interactions that you are not using, remove them…
I’ve used another animated burger icon and dropped it into the default nav symbol. This has recreated my issue of the animated burger icon not triggering on first click - though it appears to work fine in preview mode, it is not once live and viewed on iphone. Can you offer any advice?
Lately, we discovered an issue with the click interactions on the navbar element that exists on iOS 13 devices. While our engineers are working on the solution, could you, please use the Navbar open/close trigger to animate your custom hamburger icon, instead of the Click trigger. It should help to resolve the problem you are experiencing.
)