Follow us

Change the Divi Active Menu Item Colour - Tutorial for Divi | Divi Soup

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!

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. 

Change the Divi Active Menu Item Colour

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. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!