I have long been tormented by the question, but I constantly put it off and used the one standard Webflow icon. I think it is time to talk about this important theme.
Who uses what solutions to animate the hamburger icon change? I mean when needed place different icon to active and no active navbar button state. Interactions method is crutch cause if click on empty place — menu is closed, but second click of interaction will not work:
http://broplayground.webflow.io/navbar-hamburger-icon-change
Well put the question differently. How with js connect second click interaction with close action?
I would personally use two divs as an ‘‘icon’’
style each div as you wish (in this case; maybe 25px width, 2px height)
then you can animate the two ‘‘lines’’ as you wish via interactions 2.0.
Kind regards,
Djaya
I used a similar type of hamburger menu in one of my clients website:
@HappyDigital thanks for the answer, but the question was different. How to correctly link the button of the standard component of the nav menu with the interaction If you do icons animation using interactions? The problem is shown on the gif (the menu closes when you click anywhere, but because of this, the interaction of the second click does not work and the menu icon does not change). Sorry for my English, I hope, now more clearly explained what the problem is.
I think you cannot do it on default nav. You will have to code your own nav with closing events tied to clicking outside the nav which will either require javascript or another hack - create a fixed layer with z-index higher than anything but the nav, make it span fullscreen, be transparent, having a display:none set and appear only on first click on navbar. Then add interaction for on click for this layer that will close the nav and play your burger close animation (the same interaction should be of course added to the second click of the hamburger as well). Don’t know if you’d want to use this solution though.
@dram yes, I do it before, but I thought that maybe someone found a solution (script) that would work with the standard menu. Thanks for the detailed answer:v:
I am sure someone knows how to achieve this with custom javascript. I am not much of a coding guy myself.
Hi @bro-design.
I had this exact same problem. The issue as, you demonstrate, is the interaction not being triggered by clicking outside of the menu and icon on closure.
I’ve managed to overcome this by adding the interaction to the actual webflow nav bar container, not the hamburger/plus icon itself. This way it keeps the functionality of the webflow nav bar.
Hope this helps 
@stevemillerbrewd I don’t think I understood what you mean by the end. Can you show an example in a read only link please?
Like this…
You might have to switch to designer and back to preview to make it work. Plus/Cross should rotate on open/close
So I am having this exact same problem and while I think I understand stevemillerbrewd’s solution when I add the interaction to the nav bar container the hamburger still does not return to it’s original stage when the second click is not on the menu, hamburger or nav bar as Bro-design’s original Gif demonstrates. There appears to be an invisible layer that triggers the menu to retract when you click on the body of the website but I can’t seem to find it in the Nav element to add the required second click interaction. In addition the link Steve sent is producing a 404 error. I’ve tried other solutions in this forum to no avail. Would appreciate some help.
Hi, @rgspratt. This is not obvious, but very simple.
Live: https://broplayground.webflow.io/navbar-hamburger-icon-change
Read-only: Webflow - BroPlayGround
Hello bro-design. Thank you VERY much for the timely screenshot. While I had done exactly that based on stevemillerbrewd text description my Nav was part of a symbol and for whatever reason that seems to inhibit this functionality. Your screenshot pointed me in the right direction as the native Webflow nav element seems to work as expected. Thank you for helping me get over that troublesome hurdle.
I may have spoken too early it appears the trigger has to do with me using the slide right menu style vs the drop down in your example not the fact that the original Nav was a symbol. None the less I’m a lot closer than I was. Thanks for the help.
You are welcome
Hey @rgspratt if you are still looking for the answer. You just need to use the element trigger “Navbar opens” in the interactions. if you are using Lottie file, this video should help : Lottie menu nav icon - Nav opens - Webflow Interactions tutorial - YouTube
This is the perfect solution.
