Adding a css style to the main nav menu in child pages

Question

I have a WordPress site where I am adding a custom style to the main navigation based on whether the user is on that page. The articles section of my site has several articles within it that users can visit.

I use this css style as seen below which has the desired effect when the viewer is on the articles page, WordPress helpfully adds the current-menu-item class to the html markup:

#navigation li a:hover, #navigation li.current-menu-item a {
text-shadow: 1px 1px 2px red;
-webkit-transition: color 0.5s, text-shadow 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;
}

However I would like to keep this style applied to that top level item if the user is in a single article page. Is there a way of achieving this?

Answer 1

in your functions.php file add the following code:

if ( is_page( yourpage ) ) //yourpage can be your page's id, title or even slug
    wp_enqueue_style( 'path/to/your/custom/css/file' ); //your stylesheet path
elseif( is_page( yourpage ) ) //yourpage can be your page's id, title or even slug
    wp_enqueue_style( '2nd/path/to/your/custom/css/file' ); //your stylesheet path
else
   wp_enqueue_style( '3rd/path/to/your/custom/css/file' ); //your stylesheet path

see also: is_page and is_single

Answer 2

Ok I got the result I am after by targeting the css classes that WordPress adds to the menu, I would like a more elegant method using some WordPress inbuilt php functions but that seems to be beyond me

The "article" link in my primary navigation is as follows:

<li id="menu-item-269" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-269"><a href="http://www.jonathanbeech.dev/articles/">Articles</a></li>

Simply by targeting the class menu-item-269 combined with the unique class applied to the body of the single-articlephp page, I was able to keep the article link with a currently active style even when the user is within single child pages of the main article page.

so the css looks like this:

#navigation li a:hover, #navigation li.current-menu-item a, .single-article li.menu-item-269 a, .single-portfolio li.menu-item-191 a {
text-shadow: 1px 1px 2px red;
-webkit-transition: color 0.5s, text-shadow 0.5s;
-moz-transition: color 0.5s;
-o-transition: color 0.5s;

}