Animate menu icon

DebsWebs · April 2023

Hi,

I am using the Creative Header option where the menu slides in from the left. I would like to animate the "Menu" button so that it will slide in from the left a few seconds after the page loads. My client loves the way the Creative Header option looks and works, but users are having a hard time locating the menu. So we thought if we create something animated to catch their eye once they are on the page, it would be perfect.

Here's a link to my site: https://www.thespires.org/dev/. The menu item I would like to animate is the large blue button with white text that says "Menu". There are lots of items that are super easy to animate, but I didn't see any option for this.

Thanks for your help.

Phil · April 2023

Hi,

Please try the following CSS code:

.creative-menu-toggle{
   animation-name: fadeInLeft;
 animation-duration: 1s;
   animation-fill-mode: both;
   animation-delay: 2s;
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

DebsWebs · April 2023

That's perfect!!! Exactly what I wanted. Thanks SO much!!

Phil · April 2023

You are welcome. ?

Best regards

Animate menu icon

Comments