Help with CSS for Primary Nav Menu font color when on sub-page

[AlAnthony]

I am using the Executive Pro Theme Red version on a development site. I am trying to come up with the CSS that will globally change the default font color of a main nav menu item to another color when a user is on a sub-page of that menu item ie. the default main nav menu item font color is gray but when a user is on a sub-page of that main menu item, the main nav item font color is red.

The only way I can see to do this is to create CSS for each individual sub-page that governs the main nav font color when a user is on that page. This is tedious.

Is there a more global way to do this?

[Victor Font]

You use the global color for the entire site and then customize the home page only. Executive Pro includes the body class of .home for the home page only. Any custom home page colors should be inserted into style.css after the global color and precede any directives with .home. As an example:

.home .genesis-nav-menu {
    color: #666;
    font-size: 14px;
    font-size: 1.4rem;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[AlAnthony]

This reply has been marked as private.

[Victor Font]

Private replies are not visible to anyone.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[AlAnthony]

Sorry about that. Thanks for the suggestion, Victor.

However, this doesn't solve the problem. If someone is on services > new homes page, the services nav item font remains grey - the default color. I need this to change to red.

See here.

Do you have any further suggestions?

[ᴅᴀᴠɪᴅ]

Yes, there is a class for this automatically added by WordPress. 'current-menu-ancestor'.

So, adding;

.executive-pro-red .genesis-nav-menu .current-menu-ancestor a {
    color: #e04b4b;
}

will do what I think you want.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[AlAnthony]

Dave, you hit the nail on the head! Works beautifully! Thanks.

[Author]

Posts