Change the Divi Header Menu Link Hover Color

A common question I get is how to change the hover / mouse over color of the main menu links in the Divi header. This post covers some of the options:

Changing the Menu Link Hover Color in the Default Header

An important thing to be aware of is that there are now two main ways to add a header in Divi. The first way is to use the default header that is present when you first set up Divi, and which was the only header available in Divi 3.0 and earlier. I'll cover this now.

If you've added a header using the Theme Builder, there's a separate section for that below.

Set the Default Header Menu Link Hover Color using Divi Booster

My Divi Booster plugin offers a simple option for setting the hover color of menu links in the default Divi header:

You can find it in the Divi Booster settings, under "Header > Top Header > Menu link hover color".

Set the Default Header Menu Link Hover Color using CSS

You can change hover color of the the default Divi Header menu links with the following CSS:

#top-menu-nav #top-menu a:hover,
#mobile_menu_slide a:hover { 
    color: red !important; 
    opacity:1 !important;
}

Changing the Menu Link Hover Color in a Custom Header

A second way to add a header to Divi is to use the Theme Builder functionality added in Divi 4.0 to add a global or area-specific header. This header is a Divi Builder layout, and typically includes a menu module to approximate the functionality of the default header.

Set the Default Header Menu Link Hover Color in the Menu Module

Assuming you're using the menu module to create your custom menu, you can set the hover color using the following setting:

Specifically:

  1. Open the Menu module settings
  2. Switch to the "Design" tab
  3. Expand the "Menu Text" subheading
  4. Locate and hover over the "Menu Text Color" option
  5. Click on the mouse pointer icon that appears next to the option name
  6. Click on the tab with a mouse pointer icon that appears
  7. Select the hover color you want
  8. Save the module settings

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

32 Comments

  1. This works, thank you!

    Reply
    • Glad to hear it, Edwin. Thanks!

      Reply
  2. This just saved me an hour of faffing! Thanks for this tutorial, will definitely be looking out for Divi Booster posts like this in future when asked for random requests!

    Reply
    • Glad it helped, Doug! If you every fail to find a solution to a problem you're having, give me a shout and I'll try my best to help out. Cheers!

      Reply
  3. Great ! Thanks a lot for this tutorial, straight to the point.

    Reply
  4. I just tried something and it worked. I just went into the Custimization > Header & Navigation > Header Elements section of the Divi customization settings and entered the following into the Phone Number field…

    <a href="tel:2315555555" rel="nofollow">231.555.5555</a> | <a href="tel:8005555555" rel="nofollow">800.555.5555</a>

    It works perfectly.

    Reply
    • Hey Jim, I'm glad you were able to figure it out, and thanks for sharing your solution. I've used the same trick for a single phone number in the past, but it's good to know it works for two as well. Thanks!

      Reply
  5. We have two phone numbers in our top header. An 800 and regular number. Is there a way to link both? Would it just work with some CSS added or some other way? The phone numbers are listed this way via the Divi phone number input…

    800.555.5555 | 231.555.5555

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.