Q13: Change the Divi Active Menu Item Colour

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!

Ingredients

Just default Divi, you don’t even need a child theme, although I do recommend it.

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