I have always struggled through getting the active menu styling to work ‘easily’ in Divi.  You can easily control color scheme via the Theme Settings, but sometimes you want to take control entirely in CSS and something like:

#main-header #et-top-navigation #top-menu-nav #top-menu li a:active {
  color:red !important;
}

Doesn’t work.  Use it, inspect and manually check the ‘Active’ option in Chrome and it works, but not natively.

Finally found the answer:

#top-menu li.current-menu-item > a { 
  color: red;
}

More specifically, I was trying to replace an :after pseudo element with a different font-awesome icon.

I ended up using the following:

#top-menu li.current-menu-item > a:after { 
  content:"f096" !important;
}

The trick here, apparently, is Elegant Themes ‘takes control’ somewhere else in the styling with the .current-menu-item class.

For posterity, my other normal navigation uses the following CSS which provides an icon after:

#top-menu li a:after {
 font-family: FontAwesome;
 content : "f111";
 font-size: 9px;
 margin: auto !important;
 display: block !important;
 text-align: center !important;
}
#top-menu li:hover a:after {
 font-family: FontAwesome;
 content:"f096" !important;
 color:green;
}

The idea came from the JollyAll theme by Mojo Marketplace.

Either way, now, by adding the ‘li.current-menu-item’ styling the selected item matches the hover.

Nice!

 

Eventually you can view the site here: greenlight.md