Highlighting a Specific Header Menu for A Specific Post

Hello, Mike. The code does not seem to work. Everything still shifts over to “Blog” regardless. Does capitalization matter? The header menu is all capitalized (DESTINATIONS) whereas the category itself only capitalizes the first letter (Destinations). I’ve tried all variations of capitalization as well and it still didn’t work. I inputted the following version of the code into the Child Theme’s functions.php area.

add_filter( ‘body_class’, ‘add_category_class’ );
function add_category_class( $classes ) {
if( is_single() && has_category(‘destinations’) ) $classes[] = ‘destinations-cat’;
return $classes;
}

Is there something else that we are missing? I feel this is slightly more problematic than it should be. The code makes sense (is_single for only posts and the specific category), but it’s still not working. Is there something else we can try?

Sure thing, Mike. Thank you for helping.

When I hover the mouse over the word “Blog” there is no hover state. That makes me think we somehow masked but didn’t resolve the issue, because it’s messing up the hover state for the “Blog” menu.

I’m slightly concerned the problem will manifest itself in other ways if not actually resolved. Is there anyway to fix that? As in, keep the destinations active state while restoring the hover state over the “Blog” menu item? Perhaps figuring that out will solve the problem once and for all.

Thank you so much, Mike. Your help has been amazing. Please let me know if I understand this correctly. Suppose I have a menu header item and category called “Stuff” in the future, I would do the following.

put into function.php’s previous block of code.

if( is_single() && has_category(‘stuff’) ) $classes[] = ‘stuff-cat’;

put into custom css

#top.stuff-cat .avia-menu li.current-menu-item {
background-color: transparent !important;
border: 0px solid #ffffff!important;
}
#top.stuff-cat #header .av-main-nav > li.current-menu-item > a .avia-menu-text {
color: #fff !important;
}

#top.stuff-cat .avia-menu li#menu-item-2165 {
background-color: #f2f3ff !important;
border: 1px solid #ffffff!important;
border-radius: 100px !important;
}
#top.stuff-cat #header .av-main-nav > li#menu-item-2165 > a {
color: #109bc5 !important;
}

#top.stuff-cat .avia-menu li.current-menu-item:hover {
background-color: #f2f3ff !important;
border: 1px solid #ffffff!important;
border-radius: 100px !important;
}

#top.stuff-cat .avia-menu li.current-menu-item a:hover,#top.stuff-cat #header .av-main-nav > li.current-menu-item:hover > a .avia-menu-text {
color: #109bc5 !important;
}

I have only two questions left out of curiosity. Why is the code below broken up like that (the color: #109bc5 in a separate function instead of being grouped with background color, border, and radius? I noticed the same pattern with the hover state.

#top.stuff-cat .avia-menu li#menu-item-2165 {
background-color: #f2f3ff !important;
border: 1px solid #ffffff!important;
border-radius: 100px !important;
}

#top.stuff-cat #header .av-main-nav > li#menu-item-2165 > a {
color: #109bc5 !important;
}

And is 2165 just an enfold thing? Thank you.

Thank you for all your assistance, Mike.