Having trouble with interactions on my Menu Button. I’ve created an interaction so that when clicked, the menu button transforms into an X. There are a few issues:
The Nav Menu slides over top of the Menu Button, and so the Menu Button is not clickable when the Nav Menu is open.
In addition, I’m having trouble finding a workaround to get the Menu Button to revert to its original state between clicking on Nav Links and clicking on the Menu Button again. For example, the Menu Button transforms into an X when clicked, but if you click a Nav Link the Menu Button transforms back into the hamburger icon, and then isn’t correct when clicked again because of the overlap in interactions.
As for the issue when not being able to predict wether the button will get two clicks or one click plus a click on a menu item to close is something normal in Webflow. It’s just a limitation, for the moment: you can’t reset an element states and this “second” click interaction is always going to be a problem.
So you have to think this interaction differently, and not using the second click. You need one interaction to pass the icon from a hamburger to a cross, another one the revert that.
keep the same structure, but delete all the second click things.
build the closing interaction and affect it to every menu item: test if this works when clicking on a menu item
create an empty div in the menu button element and position it absolute, dimensions 100%. name it click-catch-dummy or anything else. give it the z-index 110 so it’s above the button.
affect this new div the closing interaction.
now pass this new div to display:none
edit the opening interaction, add a click trigger, affect different element : target the click-catch-dummy div, add a step with display:box in 0ms
now edit the closing interaction, add a click step, target click-catch-dummy, and pass it to display:none
Should work, the dummy div will catch the click and will be hidden by any click on it or on a menu item.
This is one way to do it, there’s others, some may be simpler.
Your menu interaction looks neat BTW Very simple and elegant, webflow sepeaking
Still having trouble. Now when I click open the menu, I’m unable to return the Menu Button to its original state by clicking on the dummy div. The Menu Button returns to its original state when clicking on a Nav Link, but not when clicking a second time on the Menu Button (with Click Dummy overlay).
@seank, the animation is just done with three separate div block to create each line of the hamburger icon. Each line has to have its own class. Then, you just animate the top line to move down several pixels and rotate 45 degrees, and then have the bottom line move up and rotate 45 degrees in the opposite direction. The middle line is just faded to 0% opacity when clicked. Then for closing the menu, you just return each line to its original position and the middle line to 100% opacity.
Hey @jordanshotwell don’t forget to put that close interaction on the menu button as well the one which you have on all the other links nice work on it!
@Waldo, do you mean on the second click? How else can I add two interactions to it? If I add it to the second click, I have an issue where if you open the menu then click on a link, it doesn’t close the menu properly.
Hmmm, this is a work around, but you could actually display a different button which is solely there for closing? (identical to what the open button looks like & placement on when the menu opens) but it’s only there when the menu is open and put the interaction on it there. Really nice work! Let me know if that makes sense.
Ahh, I missed @vincent reply, yes the dummy div should work just fine!
You have it placed inside the button, instead place it here, give it a width & height and it works
Now it works great for me Make sure it’s positioned correctly on different viewports. Nice work @jordanshotwell
EDIT: Also, make the “Click Dummy” a Link Box rather than just a div, that way you have the cursor change on hover
Here’s a GIF (of course the outline wouldn’t show on published site):
@vincent it works now! The only holdup is that sometimes if you click quickly to reopen the menu, it doesn’t open but the interaction continues. Strange.
Having another separate issue related to the menu as well. Not sure if you can help @vincent. When the Nav Menu is opened on tablet and phone viewports, there’s a 1px space between the Nav Bar and Nav Menu that’s transparent. I’ve run through all the borders, margins, and positioning tools and can’t seem to find anything. Here’s a screenshot of the issue. Any ideas?
You can probably fine tune your interactions to prevent that to happen… mostly by delaying the disappearance of the dummy click catcher element by a few 100s of ms, so it lets the interaction finish.
Very simple and elegant, webflow sepeaking 
the one which you have on all the other links 
