Hey there! I have created an “on click” animation to rotate my hamburger menu. However, currently users can also close the menu by clicking anywhere away from the dropdown menu.
This poses an issue because my menu button is still in the “closed” state of the animation (1st click), and I need users to have to click the menu button to close so that the hamburger animation closes (2nd click).
Does that make sense? Maybe there’s a better way to do the hamburger transition altogether…the only legitimate article is from 2016 using the old UI so I’m struggling mightily on this.
You must have some sort of interaction on that body area. It looks like the div .w-nav-overlay fills the body when the nav is open, could you share the preview link so we can look at the interaction
No I wasn’t unfortunately… my preview link response was being “reviewed” for a while and I’m not sure if anyone saw it once it was posted. I also had to wrap up the project so I haven’t revisited this issue yet.
After about a year and a half of frustration I found a solution that might help.
My assumption from your question is that your need to make users “only” use the hamburger menu icon to “close” the menu is driven by the mistiming of 1st and 2nd “on click” hamburger animation. If that is the case, then I suggest the following:
– create your 1st and 2nd click hamburger menu animation as normal and triggered on the class of your choice
– After, if you’re using the webflow native “Navbar” element you can apply an IX on the “Navbar Opens” and “Navbar Close” event (these are built into the native Navbar element). These features are normally ‘grayed’ out, but not when the “Navbar” is directly selected. See below
–Apply your same timed animation events you applied on your hamburger menu to the Navbar “open” and “close” events respectively.
This allows you to trigger the animation event based on the native “open” and “close” navbar rules that webflow establishes on the backend. So no matter where the user clicks, if it “closes” the navbar, the animation will still trigger appropriately. Therefore, this eliminates the need for you to force a user to click only the hamburger menu.
