101 Free Custom Divi Menu Hover Effects and Animations

Download this huge collection of 101 FREE Divi Menu CSS hover effects and animations to use with the Divi Theme Builder Menu module!

We spend a LOT of time developing these FREE Divi resources. However, all we ask in return is that you subscribe to the blog. You won’t get spammed or blasted like some sites do, but we typically send out an email every few weeks with  helpful new tutorials and products once in a while.

NOTE: If you already subscribed for these before, no worries. You won’t have to confirm this time, just enter your info and after the system confirms that you are subscribed, the download link will appear.

How To Use the Free Divi Menu CSS Effects

After you subscribe, you will receive an email with a link to download the files. The download will have the following file in a .zip folder, which will need to be extracted.

  • divi-menu-effects.css

Step #1. Open The CSS File

Open the divi-menu-effects.css in your favorite code editor. If you don’t have one, I suggest using brackets.io which is free and easy to use on PC or Mac.

Step #2. Copy The Animation Effect You Want To Use

Inside the CSS file and also on our demo you will find all of the Divi custom menu animation effects clearly labeled. You can match the name of the effect with the name and CSS class shown in the demo. Find the snippet you want to use between the opening and closing comments, and copy it.

EXAMPLE: Suppose you want to use the Underline Fade. To do so, copy the entire snippet starting at /*==== Start Underline Fade====*/ and ending at /*==== End Underline Fade====*/

Step #3. Paste The Code In The Divi Theme Options Custom CSS

Go to your website Dashboard and go to Divi>Theme Options>Custom CSS. Paste the snippet you want to use there, and click save.

Step #4. Add The CSS Class To the Menu Module

The last step is to add the corresponding CSS class to the Menu Module. The CSS class is the same as the selector in the code snippet you copied. Go to your Divi Theme Builder or page layout and open the Divi Menu Module settings. Go to the Advanced tab to the CSS ID & Classes toggle. Paste the class there, being sure not to include the starting “.” period.

EXAMPLE: In the example above, we can see that the CSS selector in the snippet is “.pa-underline-fade,” so that is the same CSS class you should put in the Menu module settings. The CSS classes are also listed on the demo with the corresponding name and effect.

Divi Menu CSS Effects

How would you use these with the default header? The one without the Theme Builder or the Menu module? Glad you asked! Instead of trying to explain it all, it will be best if you check out my other post on styling the Divi menu. Look at the CSS classes and IDs that target the menu, and use those instead of the custom classes in our demo.

That’s it! We hope you enjoy using these free Divi custom menu CSS Effects and animations on your websites. If you have any questions or just want to say thank you, be sure to leave a comment below!

What about the current page item?

To use these effects on the active page link, you need to add the class “.current-menu-item” to the list item. It would look something like this:

Please share this Divi freebie!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

View More Divi Freebies

Leave A Response!

20
Leave a Reply

avatar
  Subscribe  
newest oldest most voted
Notify of
imtikh99
imtikh99

WOW, Most requested features, Thanks for being awesome!

Bobo
Bobo

Big thanks! You are great! 🙂
I’ve been looking for snippets like this for a long time.

Mario
Mario

Awesome mate, thanks so much for sharing and offering it as a free resource

Maksym
Maksym

This is BOMB! Thank you so much, Nelson!

Marna Towne
Marna Towne

Thank You! How would I do this for the standard primary menu, not the menu module? Do I have to add the css selector to each menu item?

SIMON POTTER
SIMON POTTER

Is there a way to make the highlight stay on when it is on the active page?

Jonah
Jonah

This is fantastic! Thank you for this tutorial. Can the hover draw border be used with sections and module borders somehow?

Thomas
Thomas

Hallo,
vielen Dank für die tollen Menü Effekte. Ich habe schon sehr lange nach so etwas gesucht. Und dann auch noch kostenlos. Super. 🙂

Thank you for the great menu effects. I’ve been looking for something like this for a long time. And then also free of charge. Great. 🙂

gio

Simply Amazing!Thank uuuu!!!!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart