Hamburger Menu, toggle Icons

I’m creating a website with hamburger menu. Clicking on the hamburger menu icon the modal opens or closes (toggles).

When the menu is closed I have the classic 3 stripes icon. I want to change that icon to a cross when the menu is opened.

I can set a second icon (with the cross) besides the menu icon and set it invisible. But I don’t know how to set it visible on clicking on the menu icon ( and make the menu icon invisible).

Ande vice versa when closing the menu.

Or are there other/better solutions.

Thanks in advance!

Hey @Lijn-B.

Did you already check the Design Library?
There are a couple of elements available which could suit your case.

Just search for the term hamburger animation or browse through the menu category.


Thanks, I’m gonna search there!!!

You might check these vidoes:


Thank you.
I already found a perfect solution in the Design Library.
I tweeked one to my needs and am really happy.

Thanks a lot.

1 Like