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:
Related Post: Adding CSS to the Divi Theme
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:
- Open the Menu module settings
- Switch to the "Design" tab
- Locate and hover over the "Menu Text Color" option
- Click on the cursor pointer icon that appears next to the option name
- Click on the "Hover" tab that appears
- Select the hover color you want
- Save the module settings