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;
}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:
Specifically:
- Open the Menu module settings
- Switch to the "Design" tab
- Expand the "Menu Text" subheading
- Locate and hover over the "Menu Text Color" option
- Click on the mouse pointer icon that appears next to the option name
- Click on the tab with a mouse pointer icon that appears
- Select the hover color you want
- Save the module settings
Hi Dan,
I supposedly have the latest version of Divi Booster (2.7.2) but still can't use it to change the menu hover color.
Dan,
Oops, I changed the hover color in the Top Header instead of the Main Header. It works. Thanks!
Does anyone know how you would change the background upon hover for the fullwidth menu module instead of the primary menu? Looking everywhere and not finding a solution that works. Looking to add it to this site:
http://begreenpro.temp-website.us
Hi Dawn, I think something like this will work in your case:
@media only screen and (min-width: 981px) { .et_pb_fullwidth_menu ul li a:hover:before { content:""; display: block; height: 77px; position: absolute; top: -34px; left: -11px; width: calc(100% + 22px); background-color: rgba(0,0,0,0.2); opacity: 1 !important; z-index: -1; } .et_pb_fullwidth_menu ul li { z-index: 1; } }It adds a semi-transparent dark background when you hover over the links in the fullwidth menu module. Let me know if you're looking for something different.
Dear Dan,
I use Divi Booster to have a logo AND tagline in Divi theme. That tagline clashed with menu items, so I skipped to a mobile menu. Now I'd like to make better use of the links in the "on top of the header-whaddaya call it-area." I can't find out how to change the hover-color for those items. Should I be able to, do you think?
Well, I suppose that is not working.
Hi Dorit, I've just put up a post on how to change the top header link hover color. I've had the feature in Divi Booster for a while, but I've just updated it (as of v2.6.5) to handle transparency and add some other minor improvements, so I'd suggest updating to take advantage of this.
You can find the hover color option on the Divi Booster settings page at "Header > Top Header > Link hover color".
hello, the hover menu colour isn't working for me within divi booster. do i need to add css anywhere, if so, where?
Hey carla, it looks to me like you currently only have the feature to set the hover color on the top header enabled:
Header > Top Header > Link hover color
The one you need for the main header menu links is:
Header > Main Header > Menu link hover color
Check that you have the checkbox ticked for that option and a color selected, then re-save the Divi Booster settings.
Hopefully that should get it working for you, but let me know if not. Thanks!
I changed the settings in divi booster for the menu hover color but it is not working. Please assist, thank you
Hi alexis, is this on the Attalla Wellness site? If so, it looks (to me) like that setting might not have saved correctly, as the code for it isn't being included in Divi Booster's CSS file. Can I ask you to go into the Divi Booster settings, ensure that the checkbox for the setting is ticked and then re-save the Divi Booster settings using the save button at the bottom of the settings page. This will regenerate Divi Booster's CSS file and hopefully the code will now be correctly included. Note that I've just tested the setting on my test site and there doesn't seem to be any problems with the feature itself.
If that doesn't help, it's possible something is storing and using an old copy of the Divi Booster CSS file, such as a performance plugin installed on the site. I'd suggest clearing any caches in such plugins, and then clear your browser history.
If the change still doesn't show up, would you consider letting me log in to the site to take a look at what's going on?
Hello,
and i would like change the secondary menu colour in red?
Hi David, there are two options. There is an option in the Theme Customizer, under "Header & Navigation > Secondary Menu Bar" to set the text color. It will change the secondary menu color, but also the color of any other elements you have in the top header.
Alternatively, you can change the color of just the secondary menu with this CSS:
#et-secondary-menu .menu-item a { color: red; }I am trying to get Divi to have a solid color hover, not a faded color hover. How can I do this?
Also would your plugin work with Divi3?
Hi Jose, you need to add "opacity:1 !important;" (to override Divi's own opacity setting). I've just updated the code to include this.
Yes, Divi Booster works with Divi 3 :)
It works very fine !! thank you :))
I have two questions:
1) How to alternate the above mentioned code to use hexcolor, e.g. 424242 or 7c7c7c hex codes?
2) Where to put this coding? I assume the Dashboard>Divi>ThemeOptions>CustomCSS; is this correct?
Kind regards
Hi Remi,
1) You can do it like so:
#top-menu-nav #top-menu a:hover { color: #424242 !important; }Just replace the color name (e.g. "red") by the color code with a "#" at the start.
2) Yes, that's correct. There are a couple of other options as outlined in this post:
https://divibooster.com/adding-css-to-the-divi-theme/
Hi,
Just bought your plug-in, benauwt I'm struggeling with the menu hover color.
But also using the setting in your plug-in, Divi doesn't respond to this setting.
I'm using a child theme with no customization yet.
Please help.
Thanks, Stefan
Hi Stefan, sorry you've been having problems with this. It looks like Divi made a change to the way the implement their own hover colors, which was affecting the Divi Booster setting. I've fixed this in Divi Booster v2.1.5 which I hope to release later today.
I put the code to the style.css in my child theme. But it does not work.
Hi Zhou, I've just updated the code above. A change in Divi stopped the original version from working, but it should work now.
how do you change the search icon color hover state.
Hi Doc, this post explains how to do it:
https://divibooster.com/changing-the-divi-search-icon-hover-color/