How to animate the navbar’s burger menu when the dropdown is open?


I’m finalizing my portfolio thanks to the Webflow course :blush: and there are some things that visually bother me in the end. When we click on the burger for the dropdown, I would like to put a cross icon in place of the burger when the dropdown is open to suggest to the user to click on the cross to close the dropdown.
How do I do this?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Here’s a tutorial to build one manually with divs and interactions.

An alternative option would be to do a Lottie that is triggered to play on click.

1 Like

Here’s a simple way to do it: Use a bit of JavaScript and CSS. When the burger menu is clicked, you can toggle a class on the menu icon. This class can change the icon to a cross. In your CSS, you’ll have two styles: one for the burger icon and one for the cross icon.

The JavaScript part is about adding an event listener to the burger menu. When it’s clicked, this listener will toggle the class that switches the icon.
It could be something like this:

document.querySelector(‘.burger-menu’).addEventListener(‘click’, function() { this.classList.toggle(‘cross’); })

Done! I used the Lottie solution and it works, but I need to adjust the frames. Many thanks!!!

1 Like

Hello again,

I’ve checked on a PC at my local public library and on an old Mac, and the Lottie burger menu doesn’t appear.

So, I’m going to do it differently. I would like that when you click on the burger, it directly transforms into a cross without animation. For this, I have 2 SVGs, the burger and the cross (which is hidden until you click on the burger menu) in the div button.
Capture d’écran 2023-12-31 à 15.19.27
Capture d’écran 2023-12-31 à 15.19.47

If I understand correctly, I need to create a trigger and an animation. So, the trigger is when you click on the burger, the submenu appears, the burger immediately disappears and the cross appears when the submenu is not open. But to achieve this, I don’t know which action to choose and I don’t know how to make the hidden cross appear.
Capture d’écran 2023-12-31 à 15.21.26

Capture d’écran 2023-12-31 à 15.22.44

The action you need is at the bottom, Hide/Show.

1 Like