Streaming live at 10am (PST)

Reset button click count in interactions or other workaround

Hi Everyone!

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

Can’t find a good solution for it.

Thanks!


Here is my site Read-Only: LINK

2 Likes

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

Hey there, same problem here. Is there a solution for this? Would be great! :smiley:

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

1 Like

Hey, thanks for your fast answer! Indeed, it’s really annoying :wink: 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 :wink:

1 Like

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

Hey! I sorted it out:

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 ;-)).

1 Like

Hi guys, I hate this limitation too.

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).

1 Like

That’s great Rob, awesome that you sorted it out!

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 :slight_smile: Thanks for the tip