Code by Day | Explore By Weekend

Free Download Divi Header Menu Custom CSS Hover Effects by Pee Aye Creative

101 Free Download Of Custom Divi Menu CSS Hover Effects

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.

Please note that the download link will appear here on the page (not in an email)!

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 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:

nav li.current-menu-item a 
62

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!

Subscribe
Notify of
guest
86 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
imti
imti
1 year ago

WOW, Most requested features, Thanks for being awesome!

Bobo
Bobo
1 year ago

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

Mario
Mario
1 year ago

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

Maksym
Maksym
1 year ago

This is BOMB! Thank you so much, Nelson!

Marna Towne
Marna Towne
1 year ago

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?

ron
ron

Hi Nelson,
This is really great!
When do you update the post? Want to implement it with the standard primary menu

mrmule
mrmule

When i do this, the line appears directly above the text, there is no gap. How can I change this? thank you so much!

SIMON POTTER
SIMON POTTER
1 year ago

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

Arvie U Bragas

Hi, great tutorial! Can you elaborate this man? I’m still a little noob using divi. Where is the list item? – and is it possible for me to change the menu effects on an active page like here – https://empirecycles.com.au

Hemant Gaba
Hemant Gaba
Reply to  Arvie U Bragas
7 days ago

List items are present in the Menu module and when we add the Menu Module, we see the list items or Menu items. Now coming to the menu effect so please go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and add a code given below: .et-l--header .pa-underline-grow ul li.current-menu-item a{ padding: 6px 10px; border-radius: 5px; border: 2px solid #ffffff; position: relative; top: -1px; color: white !important } In the code .pa-underline-grow is a Custom Class that is given to the Menu Module so if your Custom Class is different then you can place that… Read more »

Jonah
Jonah
1 year ago

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

Thomas
Thomas
1 year ago

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
gio
1 year ago

Simply Amazing!Thank uuuu!!!!

MickA
MickA
1 year ago

heu…. ok First, thank you for allllllll of this ! It’s so cool to share 101 effects ! But but but, maybe because i’m french (nobody is perfect, i know hahaha) there is something that i don’t understand at all. For example : I use the default header. So no menu module. ok ? This default header has an active main menu link. ok ? Well, now i want to use one of your 101 effects called Bounce in. What the final code should be ? And where should i put it ? I’m lost… Thanks in advance for your… Read more »

MickA
MickA

Sorry, but i don’t understand. Look : My header is fixed, so i should use this code : .et-fixed-header #top-menu li.current-menu-ancestor>a { } Am i right ? Then, i want to apply the Bounce in effect. So with this code : .pa-2d-bounce-in nav ul li a { -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -o-transition-duration: 0.5s; } .pa-2d-bounce-in nav ul li a:hover { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } And, i tried to apply your explanation doing this : .et-fixed-header #top-menu li.current-menu-ancestor>a { -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -o-transition-duration: 0.5s; } .et-fixed-header #top-menu li.current-menu-ancestor>a:hover {… Read more »

cristina
cristina
1 year ago

This is awesome!! Thanks a lot for sharing! Great work!!

Shawn
Shawn
1 year ago

Hi Nelson, I didn’t get how to add the code “nav li.current-menu-item a”
for the active page link. Can you show me where I’m supposed to add it? Thanks again for your help.

Shawn
Shawn

I’m trying to use it with .pa-underline-color-swipe. Tried putting it between li and a tags but didn’t work.

bri
bri
Reply to  Shawn
11 months ago

hey nelson, great stuff, thanks a lot!
Everything works fine except this detail. Do you have any other suggestion what to do to make the effect stay on the active link?!

Gyles Morrison
Gyles Morrison

This literally does not work. I’ve added .current-menu-item after the li in the Custom CSS and the whole code just stops working.

Ava
Ava
11 months ago

Hi !
Firstly, thank you so much for your work !
But I tried everything and nothing to do it doesn’t work on my website…
I have the fixed main menu that comes with the theme so I followed your other tuto but it still doesn’t work… I don’t know what else to do. Any Idea ?

ChrisP
ChrisP
10 months ago

Is there a way to accommodate the Center Inline Logo menu option? When I have this turned on the Menu Hover is not centered vertically around the Text.

ChrisP
ChrisP

http://www.eco-industries.ca/ITIwordpress/?page_id=4037
there is a sample page of it. I’ve learned a little more about what it’s doing since I posted. Still can’t fix it though. Any of the effects that use the :after seem to mess up. You can see it easy on this demo page though. I’m sure it’s something I’m doing wrong though. New to this kind of web design.

Flare
Flare
8 months ago

Thanks for the effects but how do I change the position of the underline on hover? It’s too much space between underline and link.

shahzaib
shahzaib
8 months ago

How we can download this zip file.I also follow the steps but i failed

Badal Halder
Badal Halder
7 months ago

how to download it

Jack
Jack
7 months ago

I m trying use .pa-border-corner but I have Drop Down Arrow and if i use this css it s gonna be like below pic . How can i remove this i have no idea?

comment image

Last edited 7 months ago by Jack
Valentin
7 months ago

Hi,

Big thanks, it’s awesome 🙂

Like other people I would like to apply it on an active page. I’ve added the “.current-menu-item” code, but it doesn’t work .
Any ideas?

Thanks

Valentin

Thank you for your answer 🙂 I’m using this code : /*==== Start Underline Center in menu ====*/ .pa-underline-center nav ul li a {   position: relative; } .pa-underline-center nav ul li a {   position: relative;   -webkit-transition: -webkit-transform 0.5s;   transition: transform 0.5s;   -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);   -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);   transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22); } .pa-underline-center nav ul li a::before {   content: ”;   position: absolute;   top: 70%;   left: 50%;   margin-left: -22px;   width: 0px;   height: 2px;   background: #5b59e0;   -webkit-transition: -webkit-transform 0.5s;   transition: 0.5s;   -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1);   -webkit-transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22);   transition-timing-function: cubic-bezier(1, 0.01, 0, 1.22); }… Read more »

Caren
Caren
Reply to  Valentin
3 months ago

Hello! I was having trouble with this too until I realised I was trying to apply it to the HOVER, when you want it to display by default without hover. So in your case, you should add an extra little bit underneath the above code, that should look as follows:

.pa-underline-center nav ul li.current-menu-item a::before {
  width: 50px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

🙂

Claudio Scheuermann
6 months ago

On Mouse Hover, there are anyway to change de text item menu from: example, “Home” to “New York”.

clausche
clausche

I find out how to do it. thank you anyway

J Rojo
J Rojo
6 months ago

Hello:
Thank you for your video and css. It is really awesome.
I have but one problem : tried to use the .pa-background-swipeup but when I copied the code and placed the class in the menu configuration I get much narrower box around the menu items, not like the one in your demo.
How can I fix that?
Thank you.
J.

Captura de Pantalla 2020-09-29 a la(s) 23.39.07.png
Jack
Jack
6 months ago

This is amazing thank you, I am using .pa-corner-border but was wondering how to add padding around the text / menu item so that the border wasnt sitting right on the text.

Hope that makes sense.

Many Thanks,

Jack

Jack
Jack

Hi, I have used a different section of the code and that seems to be woking.

Thanks for your speedy response though.

steve
steve
5 months ago

thank you so very much
that is beyond massive and I won’t be forgetting your help – you’re like to human springboard for aspiring divi builders, and those already well appraised
for now I’ll take the code and apply it to get my site up, but in time I’d like to go through and learn how this all works, and would be interested if you have a course that covers these coding concepts (css, jquery, etc) and how to apply them to divi

  • very grateful!
Ihate
Ihate
5 months ago

WTF, no link, no attachment in the email… like WTF man? Stupid scam, fix your shit.

Evan Courtney
Evan Courtney
4 months ago

It’s not working for me. I’m using .pa-underline-from-left  I add the custom CSS into Divi Custom CSS and then added the CSS ID to the menu module. Site ~> http://vibrantchuchms.flywheelsites.com/ Private site: username/password ~> vibrantchurch /*==== Start Underline From Left ====*/ .pa-underline-from-left nav ul li a {   position: relative;   overflow: hidden;   transition: all 0.3s;   -webkit-transition: all 0.3s;   -moz-transition: all 0.3s;   -o-transition: all 0.3s; } .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; } .pa-underline-from-left nav… Read more »

Screen Shot 2020-11-21 at 9.15.49 AM.png
Huzaifa
Huzaifa
3 months ago

Hey hope everyone is well. I am using the snippet .pa-underline-fade and I want to decrease the space between the line and navigation link. I am not much of a coding expert but I do know how to modify a code as I have been copy-pasting codes for a long time. So if any one know a solution please leave a code>

Spencer
2 months ago

Love your work Nelson! Thank you for putting your time into this

randybsamolde
randybsamolde
1 month ago

Thanks for the post and loads of great snippets there.

About the confusion to get it working with primary menu and active current menu item.

Would it be possible to show the CSS code for one of the hover effects shown with it assigned to #top menu rather than a new class and additionally showing the extra CSS needed to show the active menu item with the transition complete to highlight the active page??

Thanks

Martin
1 month ago

hey,
Love it.. just that it doesn’t seem to work when I’m using it in a global header menu! (?)

Martin

Good stuff.. I’ve got it up and running with a global header now!

Keep up the good work!

Kamil
24 days ago

Hi. Why does the menu float smoothly for you and me very quickly? I used a float

Kamil Czajkowski
Kamil Czajkowski

for me the menu goes up quickly, and for you it is slow. Link to the movie: https://www.dropbox.com/s/h8a3qhhnxnppesa/Nagranie%20z%20ekranu%202021-03-23%20o%2016.50.49.mov?dl=0

Hemant Gaba
Hemant Gaba
Reply to  Kamil Czajkowski
7 days ago

Please go to the WordPress Dashboard > Divi > Theme Options > Custom CSS Panel and place the code given below:

.pa-2d-float #menu-menu li a{
transition: transform 0.2s ease-in-out !important;
}

Please let us know how it goes. 🙂

Note: You can also change the value of 0.2 to increase or decrease the transition time. For example, if you change 0.2 to 0.5 then the Menu item will go up more slowly.

Maris
15 days ago

Thanks a lot for creative tutorial!
How can I change color text on hover background?
Now menu background is white and text black
and hover background should be black and text white
I’m newbie 🙂

Thanks for helping

Hemant Gaba
Hemant Gaba
Reply to  Maris
7 days ago

If you are trying to change the background color of a Menu item plus the text color of the Menu item on hover then, Please add one more CSS property in the hover code which is:

color: white;

This will change the color of the link to white. Make sure to apply the code on the Menu Item’s anchor tags(a).

Please let us know if this helps or not. 🙂

Maris
15 days ago

I used this code and divi css selector suggested two errors; the first on line 3 Expected RBRACE. And the second in tge end Unexpected token ‘} on line 49. how can I solve? /*==== add some spacing around menu items ====*/ .et_pb_menu ul>li>a {   padding: 14px 20px!important; } /*==== elimitate opacitcy change on hover ====*/ .et_pb_menu ul>li>a:hover {   opacity: 1!important; } /*==== Start Background Fade ====*/ .pa-background-fade nav ul li a {   position: relative;   background: #FFFFFF;   z-index: 1; } .pa-background-fade nav ul li a::before {   content: “”;   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   background: #000000;… Read more »

Hemant Gaba
Hemant Gaba
Reply to  Maris
7 days ago

The single issue I could spot in the code is the quotes that are being used in the content property so I corrected that and pasted the code below. Please use the code and see if it solves the issue and if the issue still persists then please try adding the URL of the page so that I could investigate further. /*==== add some spacing around menu items ====*/ .et_pb_menu ul>li>a { padding: 14px 20px!important; } /*==== elimitate opacitcy change on hover ====*/ .et_pb_menu ul>li>a:hover { opacity: 1!important; } /*==== Start Background Fade ====*/ .pa-background-fade nav ul li a {… Read more »

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart