Can't add animation to hamburger menu

[Toshiki_SATO]

I was able to add animation to the hamburger menu before, but…
Are you no longer able to do it?

Wix Studio Editor

[noahlovell]

Is this for the container, or the hamburger icon itself?

I know some people have added a stretched container to the hamburger container to create their own customizations, like animations etc

[THI]

I’ve just recently been making my own custom menu setup which includes animated buttons. Posting details here in case it helps anyone.

For the hamburger, I created a stack of 3 horizontal lines. I put that stack in a 48x48px container. Above the stack I also added a circle basic shape that filled the container. The basic shape is what contains the link to the menu, which in my case triggers a lightbox that appears like a mega menu.

I then added a custom animation to the container on hover, made the middle horizontal line of the hamburger disappear, the bottom one move upwards to the centre of the container, and the top one rotate 90 degrees and move down to the centre - so the lines form a + symbol.

When clicking, and the lightbox menu slides down, I recreated my hamburger container, but without the 3 horizontal lines, and put the X button to close the lightbox into the container instead, with a hover animation of its own, that rotates the X icon 90 degrees.

The result is that hovering over the hamburger animates it into a + symbol. Clicking launches the menu and appears as though the + rotates into an X

Short video example here

[noahlovell]

Impressive creative solution

[THI]

If it helps at all, the site is now live so you can see the menu in action:

Cyber incident response & risk management | STORM Guidance