Help with replacing hamburger icon with close icon when menu is open

Design help Animations & Interactions
1

Hi everyone,

I’ve been using Webflow for a while, and found ways to do some pretty cool stuff. There is 1 thing I’ve been struggling with for several days now, and I’m assuming the solution could be simple, so would love to get some help from the community.

I have 2 svg icons, I’d like to show one when the menu is closed, and another one (similar but with X) when the menu is open.
The icon for menu closed is in the “hamburger button” div, the other one in the “hamburger button closed” div.
They are within a “hamburger menu” symbol, so I can re-use it as part of another header (with some additional items in the header).

I found this reference (https://webflow.com/blog/how-to-customize-your-hamburger-menu-in-webflow), but couldn’t make it work (it’s also outdated).

Thank you in advance!
Joris

Here is my public share link: https://preview.webflow.com/preview/livetheworld?utm_medium=preview_link&utm_source=designer&utm_content=livetheworld&preview=6a128af1489b95626ff3b8ff777ac018&workflow=preview

2

Hello Joris,

I used this tutorial from pixelgeek on how to change it by using a lottie animation How to Webflow: Replacing the hamburger menu icon with a Lottie animation - Tutorial (2019) - YouTube

In case you don’t want a lottie animation, I still think the tutorial may be useful because of the first and second click animations that sound like a solution to your problem.

Hope this helps !

3

Thank you so much for your help, @PixZen ! I could make it work with an easy on-click animation indeed.

1 Like