Enjoy this rare and totally awesome collection of Divi Menu CSS hover effects for FREE!
Free Download of 101 Divi Menu Hover Effects
A while back, we started creating a collection of Divi menu CSS hover effects to give away. We started with 30, which was a nice amount, but soon realized we should go big or go home. So here it is, our one-of-a-kind Divi freebie like never before — 101 free Divi menu hover effects and animations for you to use with the Divi Menu module!
To access these cool effects, just add your name and email in this form below and we will send you a download link to the file. It’s that easy!
Subscription Information
We spend a lot of time developing these FREE Divi resources. Quite frankly, all we ask in return is that you subscribe to our email newsletter. You won't get spammed. Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can't wait, but honestly not very often! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore 🙂
If you are not subscribed, you will need to enter your name and email in the form below. Our system will send an opt-in confirmation email. Once you click confirm on that, then a second email will arrive in your inbox with the download link.
If you already subscribed, just enter your info and the email will arrive in your inbox with the download link.
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====*/
/*==== Start Underline Fade ====*/
.pa-underline-fade nav ul li a {
position: relative;
}
.pa-underline-fade nav ul li a::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 2px;
width: 100%;
background-color: #2cba6c;
z-index: 2;
opacity: 0;
display: block;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
-webkit-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
-o-transition-timing-function: cubic-bezier(.58, .3, .005, 1);
transition-timing-function: cubic-bezier(.58, .3, .005, 1);
}
.pa-underline-fade nav ul li a:hover::before {
opacity: 1;
}
/*==== End Underline Fade ====*/Step #3. Paste The Code In Your Website
Next, paste the snippet of your choice into your website.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSSÂ tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
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.
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:
nav li.current-menu-item aIf you need more help understanding this, keep in mind that this is a free resource and we cannot provide customization service. But we do have another tutorial that you can check out to learn more about how this works. Please check our guide on How To Style The Active Divi Menu Item.
Hi there,
I’m trying to change the color of the line for the .pa-underline-from-left effect. It seems to default to green and I’m not seeing where to change it.
Thanks in advance,
Wayne
Hi there,
I’m trying to use the .pa-underline-from-left effect but I’m not seeing where I can change the color of the line, it seems to be defaulting to green.
Thanks in advance.
Wayne
Hi Wayne!
Please change the color of the background property in the following code:
.pa-underline-from-left nav ul li a::before {
content: “”;
position: absolute;
z-index: 2;
left: 0;
right: 100%;
bottom: 0;
background: #2cba6c;
height: 2px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
Hope it helps!