Question

I am trying to apply a special CSS to my WordPress navigation based on a post type the user is currently on.

I have gone as far as identifying the post type and applying the css to the menu. However, my problem is that it applies the CSS to the entire menu, and i need it to apply the css change to a specific menu item.

The following is the code in my functions.php file:

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){

    if ( 'portfolio' == get_post_type() ){

             $classes[] = 'current-menu-item';

     }

     return $classes;

}

It is applying the CSS correctly, but how can i get it to apply the CSS only to my menu item named ‘Work’?

Any help appreciated! Thank you.

Answer 1

Take advantage of the CSS classes field on your wordpress menu.
If you are using the wordpress generated menu set-up, click on screen options in the top right corner and check the CSS classes box.

Open up any of the menu items and you will see a field to add a CSS class now.

Then you can add a class to each menu item (maybe treat it like an ID in that you are using it to target a specific button)

That special class for that individual button may give you the hook you are looking for.