How to Make the Divi Active Menu Link Not Stay Blue
The problem is that when I choose a different color than the default blue or if I set a custom color in the Divi customizer (in General Settings > Layout Settings) as the “theme accent color”, the active menu link in the primary menu still remains blue. And this is something that I do not want. So I tried searching the ET support forum and I found the following solution:
#main-header #top-menu li.current-menu-item > a {
color: #db2391 !important;
}
Just insert this code into the Divi custom CSS code box (in Divi Theme Options General Settings) or to your child theme’s style.css file (if you don’t know what is a child theme, you can check my other article that explains what is child theme). And don’t forget to replace the color code #db2391 to your desired color.
And you might also like to read my other article in which I explain how to add social icons to a Divi menu.
Also, since the Divi version 4.0, that was released in October 2017, it is now possible to design a custom header for your website using the Divi Theme Builder feature.
Looking for more Divi quick tips? Feel free to subscribe to my newsletter and I will email you when I write a new post.
Note: This code works only if you have a custom primary menu created in your WP admin panel. So if you don’t have one yet, go to Appearance > Menus and create a new menu & add your pages to it. Also, choose the option “Primary Menu” as Display location.
WordPress expert. Divi user since 2014. I blog about WordPress and Divi, my favorite WordPress theme. When I’m not working with WordPress or writing an article for this blog, I’m probably learning Italian. You can read more about me here.
I’m trying divi for the first time and this was making me crazy! Thanks! I’m having the same issue for the nav links in the footer. Do you know the CSS for the Footer Menu Active Link Color?
Thanks!
Dawn
Hi Dawn, I’m glad that it helped you. For the footer menu try using the following code:
#main-footer #bottom-menu li.current-menu-item > a {color: #db2391 !important;
}
Thank you for your site! This tip was very helpful and fixed most of the “blue” active menu links. However, for any menu links that have drop-downs, the parent menu item stays blue when I am accessing one of the child pages. Only when scrolled all the way up. As soon as I scroll down, which activates the static menu, it goes to the red color I assigned in the CSS. Any ideas on additional CSS I can add to fix this? Thank you so much for your time!
Try using the following code:
#main-header #top-menu li.current-menu-item > a,#main-header #top-menu li.current-menu-ancestor > a, #main-header #top-menu li.current-menu-item > a
{
color: #db2391 !important;
}