I’ve been banging my hand with this for several hours. Here is my site Read-Only: LINK
I have interactions which show animated menu and hamburger open/close animation.
First click on hamburger - turns menu icon into X and opens menu
Second click - returns normal menu icon and closes menu
IT works fine, but now I would like to have similar interaction when I click on “About Us” link. This will be an anchor link on the same page, so the menu should be closed.
I applied same hambugrer interaction to the “About Us” link block. It works, but the problem is that once I click About Us and the Menu is closed, if I want to open it again, I have to click on the hamburher button twice.
When I click on hamburger once obviously this click is being treated as “close the hamburger” interaction from a second click interaction setting for hamburger
Bump! Have found no solution to this and now need in in a second project. There really should be some interaction setting to reset first/second button clicks
Hi Rob, I didn’t find any solution to this, I think it should be possible with javascript somehow, and it would be great if Webflow adds support for this, seems pretty basic
Hey, thanks for your fast answer! Indeed, it’s really annoying I’ve made a nice hamburger and menu animation (first click / second click), but when I click the link that scrolls to the anchor I can activate the menu closing animation, but afterwards I have to tab/click the hamburger twice to activate the same animation… I’ve seen several topics about this in the forum, but it seems that no one from the Webflow team wants to give an answer
Yes it’s kinda annoying indeed, in theory you could duplicate the same hamburger button renaming the class and replace the first initial button with the duplicate upon an anchor link click by adding additional interaction. But then if someone clicks third time…it gets very hard to track
I made two hamburger buttons, exactly on top of each other.
They both have 1 click action: the first one only opens the menu, and the second one only closes the menu. So: no second click action needed then.
When you click the first one, the second button appears and the first one hides. Because they fade in each other, and they’re exactly look the same, you don’t see the fading.
When you click the second one, that button disappears and the first one appears again.
Also, clicking the anchor link triggers a separate menu closing and hamburger animation action.
It now works (even when clicking three, or 10 times ;-)).
Instead of creating a second element equal to the first one, though, I usually create a transparent div inside the button itself, with position set to absolute and width and height to 100%. This element is hidden until the button is clicked, then switches to “display: block” in order to become clickable. Of course, when it’s clicked, it disappears again rewinding the situation.
I prefer this solution because I don’t have to duplicate any kind of animation or special styling that I have done to the trigger. It becomes quite handy when you have many triggers in line (like in an accordion).
Ohh interesting solution, I was using same approach to add a clickable music player button on top of lottie animation, but it didn’t occur to me to do this for the menu button Thanks for the tip
I was having this same problem and figured out something that worked for me.
In Project Settings > Custom Code > Footer Code, I added this
<script>
let navLinks = document.querySelectorAll(".navbar__link");
for (let navLink of navLinks) {
navLink.addEventListener('click', () => {
document.querySelector(".navbar__menu").click();
})
}
</script>
Basically, this is what the script does (for those unfamiliar with javascript):
Select all elements with class .navbar__link, and add them to a list navLinks
For every individual navLink in your navLinks list, add a listener that waits for a click event on itself.
When any individual navLink is clicked, “simulate” a click on your hamburger too. This adds another click to your hamburger, thus resetting it to the default state.
This code assumes that an element with the class .navbar__link links to a section on the same page.
If you’re targeting a single element, assign an ID to it, use a different type of query selector, and get rid of the for loop. Maybe something like:
Try this. I used it for my 100VH popout mobile nav menu.
The issue was that when I clicked on a menu item with class: nav-link-block I wanted the menu to animate a size change from 100VH back to it’s original size as a bar at the top of the screen. This would close the menu cotaining the interaction trigger: nav-link-block
But webflow was still waiting for the second click event as per the tap trigger settings, even though I had not defined one. This would result in the user having to perform two clicks on the menu icon if they wanted to open it again. An initial dummy click to exit the previous menu close interaction that only had a 1st click defined, and then the actual click which would trigger the menu open interaction again.
This code just adds that second click event to the hamburger icon so that the user never notices it. The code says: When the menu item is clicked, add another click event to the menu icon. This effectivley acts as the second click which is not required for this interaction. They can just click once and open it again as expected.
You can place it in the footer code under project settings > custom code > footer code
I’ve made a nice hamburger and menu animation (first click / second click), but when I click the link that scrolls to the anchor I can activate the menu closing animation, but afterwards I have to tab/click the hamburger twice to activate the same animation… I’ve seen several topics about this in the forum, but it seems that no one from the Webflow team wants to give an answer 
Thanks for the tip