Streaming live at 10am (PST)

Navbar Hamburger Button Animation

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:

https://preview.webflow.com/preview/canberra?utm_source=canberra&preview=8b1ff381d41728a97c72d7c04ea86d09

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

1 Like

@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::blush:

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 :slight_smile:

1 Like

@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…

https://preview.webflow.com/preview/navigation-animation-0f1bb1?utm_medium=preview_link&utm_source=designer&utm_content=navigation-animation-0f1bb1&preview=eab4a60e4aedf94e686c08d3a8c2a1b0

You might have to switch to designer and back to preview to make it work. Plus/Cross should rotate on open/close

@stevemillerbrewd
ok