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-info-email:hover, 
#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!

Leave a Reply

avatar
  Subscribe  
Notify of

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