I created an interaction for the Hamburger Menu, where upon clicking on a menu item, the menu collapses.
When I open and close the menu using the hamburger icon, it takes place seamlessly.
But the problem arises when I click on a menu item, which scrolls to the section and collapses the menu. But if I click on the hamburger icon again, it replays the animation of the menu collapsing quickly. How do I fix this?
Here’s a video explaining the issue - Imgur: The magic of the Internet
I am using the same interaction for the hamburger icon and the menu links.
Link to Project: Link
*Edit - updated read only project link.
Hey @neelshenoy !
Your read-only link doesn’t seem to be working for me. Could you try sending it again?
Thank you for the response! Apologies, the link might have expired.
I have updated the link. Here you go: Read Only Link
I figured out the problem. The reason the glitch happens is because the behavior on “second click” for the hamburger menu icon is to close the menu (so that when I first click the icon, it opens, when I click on the icon again, it closes)
But the behavior I have set when I click on a menu item, is for the menu to close again. Hence, the menu has closed due to first click on a menu item, and not second click on the hamburger icon again.
So the subsequent click on the hamburger icon to open it, plays the “second click” animation.
Now that I have figured this out, can you help me with how I can solve this problem?
Hey @neelshenoy !
I was literally just about to send a video explaining just that I’m glad you were able to figure that out, though!
Give me a few minutes and I’ll show you what you could do to fix it
Here’s a video of me walking through how I would get this interaction functioning the way you want it to: https://share.cleanshot.com/K6Rmuf
Hope this helps!
Thank you so so much for taking out the time to walk me through the entire solution! I really appreciate the effort you put in.
This solves my problem and also teaches me a few more tricks on Webflow!
Have a good one!