The secondary header in the Divi Theme allows you to display details such as your phone number, email address, social icons and a secondary menu. You can easily change the non-hover color of these items using the following built-in Divi option:
Divi > Theme Customizer > Header & Navigation > Secondary Menu Bar > Text Color
However, there is no way to set control the hover color of the links in the secondary header. By default, they are just faded slightly by applying a 70% opacity setting. If you want to be able to set a secondary header link color of your choosing, here's how to do it.
Method 1: Setting the Secondary Header Link Hover Color in Divi Booster
My Divi Booster plugin has a simple-to-use option for setting the hover color of the secondary header links. You will find the option on the Divi Booster settings page at:
Header > Top Header > Link hover color
Simply check the box to enable, select your hover color and save.
Method 2: Setting the Secondary Header Link Hover Color via CSS
/* Set the hover cover */
#top-header #et-info-phone a:hover,
#top-header #et-info a:hover span#et-info-phone,
#top-header #et-info a:hover span#et-info-email,
#top-header #et-info #db-info-text a:hover,
#top-header .et-social-icon a:hover,
#top-header #et-secondary-nav a:hover {
color: #ffffff !important;
opacity: 1 !important;
}
/* Add a transition effect for elements that don't already have it */
#top-header #et-info #db-info-text a,
#top-header #et-info #db-info-text a:hover,
#top-header #et-info a span#et-info-phone,
#top-header #et-info a:hover span#et-info-phone
{
-webkit-transition: color .5s;
-moz-transition: color .5s;
transition: color .5s;
}Related Post: Adding CSS to the Divi Theme
0 Comments