The home page of the site I’m working on (purchased template) has scroll-to-section behavior. When in a mobile viewport, the mobile nav is displayed when the hamburger is clicked, and the hamburger converts to a close button (X). That works just fine.
When a nav link is clicked, the page is scrolled to the appropriate section, and the mobile menu is hidden. However, at that point, there seems to be an issue with the click state of the hamburger. While the animation completes and it looks just fine, because there was only ever 1 click on that element, after the nav closes, re-opening the menu requires 2 clicks on the hamburger to re-open. To be clear, this only happens if:
User clicks on the hamburger, nav opens (click 1)
User clicks on a nav link (NOT the close menu button, e.g. there is no second click on the menu button).
The mobile menu button has an interaction on the 1st and 2nd click to show and hide the menu respectively.
Is there a way to reset the click state of an element back to zero when a different action occurs?
Thanks for the tip, @Port_of_Folio. I gave that a shot, but still no go. In fact with this installed/configured, the animation to hide the menu doesn’t fire when clicking the trigger (nav link), so I’m not sure the click event is being registered on the target element.
It looks like you have both elements (mobile menu button and “Music” button) attributes set with value = trigger. Music should be set as the “target”. Once changed, the mobile menu button (the trigger) will be mirrored onto the Music button (the target).
Unfortunately, I can’t test it. I believe the site needs to be published to see the results.
Edit: maybe you’ve changed something as I was typing but it now looks like the “Music” button has the interaction removed.