Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
As you probably know, there is an option in the Divi Theme Customiser Settings to change the active menu item colour, however for one reason or another this sometimes doesn’t work, so we need to force the issue.
With a little CSS we can set the active main menu item colour, its colour when a sub item is active, and the active sub item colour.
So let’s get cooking!
Cooking time
This should take you less than 3 minutes.
Preparation
There is no prep but let’s just check your customiser settings. Navigate to Divi > Theme Customiser > Header & Navigation > Primary Menu Bar. You set your active menu item colour in the Active Link Colour field.
Most of the time this should work, but if it doesn’t we can set it with CSS, and also have a little more control.
Method
The method for this is very simple. Just copy and paste the following CSS into your child theme stylesheet or Divi Theme Options custom CSS box and change the colour codes to your own.
This CSS allows you to control the main menu active item colour, its colour when a sub item is active, and also the colour of the sub item.
/*-------------------------------------------------------*/
/*------Change Active Menu Item Colour by Divi Soup------*/
/*-------------------------------------------------------*/
/*This will change the active main menu item colour*/
#top-menu li.current-menu-item > a {
color: #000 !important;
}
/*This will change the active main menu item colour when a submenu item is active*/
#top-menu li.current-menu-ancestor > a {
color: #000 !important;
}
/*This will change the active submenu item colour*/
.nav li ul .current-menu-item a {
color: #000 !important;
}
/*-------------------------------------------------------*/
/*----End Change Active Menu Item Colour by Divi Soup----*/
/*-------------------------------------------------------*/
If you want all three the same colour, we can combine our CSS into a single declaration like this.
/*-------------------------------------------------------*/
/*------Change Active Menu Item Colour by Divi Soup------*/
/*-------------------------------------------------------*/
/*This will change the active menu items colour*/
#top-menu li.current-menu-item > a,
#top-menu li.current-menu-ancestor > a,
.nav li ul .current-menu-item a {
color: #000 !important;
}
/*-------------------------------------------------------*/
/*----End Change Active Menu Item Colour by Divi Soup----*/
/*-------------------------------------------------------*/
And that’s it, pretty simple eh?
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
This bug still isn’t fixed (and it’s been 2 years!).
To fix the active menu item colour in Divi so that it reflects the settings set in the Customiser options, you just need to clear the Static CSS File Generation in the Divi theme options page: Divi -> Theme Options -> Builder -> Advanced and then click on ‘Clear’, next to the option for Static CSS File Generation.
Note: You may still have to re-save the settings for the active menu item colour in the theme customiser (Appearance -> Customise -> Header & Navigation -> Primary Menu Bar)
That finally worked thank you!
Hi Michelle,
I can’t get this to work for vertical nav menus that have an extra submenu, like Solutions>Design>Web Design. Do I need another target class?
Add ‘#main-header’ before ‘#top-menu li.current-menu-item > a’ Nelson and you should be good, its getting overwritten by your customiser settings so you need higher specificity
Is it possible to make different colours for the menu items?
Yes it is, each menu item has a unique ID like #menu-item-96 so you can target then by their IDs
Thanks Michelle it´s works for me!, I was crazy trying to fix it!
In my case, I had created a menu and set it for the Primary Menubar, but I forgot to add the pages to the menu! As soon as I added pages to the menu and hit save, the Active Link color started to work. So, just another idea for those where the Active Link color is not working… may need to revisit Appearance > Menus.
is it possible to have Active link page underlined?
Or Hover over underlined?
in Divi.
You can check this article for the hover effect https://divisoup.com/five-subtle-menu-hover-effects/
And you can apply the bottom border to the current menu item property so its stays when active
I cleared cache, used other browser, checked code in css lint… I added the code in my child-theme css and nothing…
Do you have a link so I can take a look?
For some reason we can’t bypass DIVI’s !important attributes in some situations. This is one of them. Is happening in a recent versions of DIVI
There is really nothing I can do to help if links to the issues are not provided
Hello, it is not working for me… checked the code in css lint, added it in my child theme, cleared all cache….
I use the latest divi variant…
I can’t get it to work. I pasted the code into my child theme style.css, reloaded my website and still the default colours appear. Your code doesn’t seem to make any changes.
This is likely one of two reasons.
1. you have caching
2. you have an error in your stylesheet above the code you added.
Best sure to clear plugin, browser and server cache and run your stylesheet through a service like CSS Lint to check for errors.
Fantastic snack! Thanks Michelle!
Most welcome
I found the same issue. Extremely frustrating. By just pasting in the colour hex code in didn’t work.
However, I found that by just moving the colour palette selector the colour on the menu changed, then adding the correct colour hex code at this point it worked.
Anyone else find this…?
I believe the latest Divi update has fixed these types of issues with the colour picker Neil