Hi
I’m finalizing my portfolio thanks to the Webflow course 
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?
Thanks
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.
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!!!
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.
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.
The action you need is at the bottom, Hide/Show.
