Code by Day | Explore By Weekend

Control Hover Opacity of Divi Menu Navigation Links

This code snippet from the Divi Code Snippet Club will allow you to change the opacity of the Divi menu navigation items on hover.

By default, the items in the Divi menu change to 70% opacity on hover. This can be nice to give the user a micro-animation, but it can also be the wrong effect depending on how you are styling your menu. It can be pretty hard to find how to control, so we are providing you with a handy snippet that will allow you to change the opacity of the Divi menu items on hover.

Copy the code below and head on over to the Divi>Theme Options and paste the snippet into the Custom CSS box at the bottom.

/*Control Hover Opacity of Divi Menu Navigation Links*/
#et-secondary-menu > ul > li > a:hover, 
#top-menu-nav > ul > li > a:hover, 
.et-social-icons a:hover {
opacity: 1!important;
-webkit-transition: none!important;
transition: none!important;

This will take effect on the email, phone, and social icons in the top secondary menu as well as the items in the main menu.


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

Other Code Snippets

Leave A Response!

Notify of
Inline Feedbacks
View all comments

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest


Your Cart