Keep highlight on menu item with post pages

Question

I have a problem with the primary nav on a WP i'm developping on local with Wamp. Searched for a solution during hours but without success. Here is my code:

HTML (php)

<div id="primary-nav" class="primary-nav-container" role="navigation">
    <ul id="primary-menu" class="sf-menu primary-menu">
        <li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-8"><a href="http://localhost/sw/">HOME</a></li>
        <li id="menu-item-241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-241"><a href="http://localhost/sw/articles/">Articles</a></li>
        <li id="menu-item-339" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-339"><a href="http://localhost/sw/blog/">Blog</a></li>
        <li id="menu-item-437" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-437"><a href="http://localhost/sw/forum/">Forum</a></li>
    </ul>   
</div>

CSS highlight

.primary-menu > li > a:hover,
.primary-menu > .current-menu-item > a,
.primary-menu > .sfHover > a {
    border-bottom: 5px solid #ddff34;
    color: #fff;
}

I've created a custom page for each category (Articles and Blog) which contain a list of posts, and also a custom page with forum category list. Each menu item is highlighted with the current-menu-item class and it's working well when I call Articles, blog or forum custom page. But when I open a post listed on the pages, which are associated with the category, or when I open a forum thread, the menu item lose his highlight property current-menu-item.

I've tried many approaches found on Google but nothing seems to work for me... probable because I'm not very familiar with JS and PHP so I'm missing something :p

Any help will be much appreciated.

Answer 1

Pretty horrible this stuff is not supported out of the box in wordpress. I didn't like the solutions here because of the hardcoded menu item names.

Only prerequisite is that the category must be present in the URL, so change that in your permalinks in the settings.

Make modifications to make it apply to your theme HTML structure but general idea is the same:

function highLightMenu() {

    let url = window.location.href;
    let elements = document.getElementsByClassName("menu-item");
    
    for(let i=0; i<elements.length; i++) { 

        let element = elements[i];
        if(!element || !element.innerText) {
            continue;
        }
        // Wordpress converts menus to lowercase and separated by - symbol. "Case studies" turns to "case-studies"
        let title = element.innerText.toLowerCase();
        title = title.replaceAll(" ", "-");
        
        console.log(url + " indexOf " + title);
        if (url.indexOf(title) > -1) {
            // Replace with your highlight class
            elements[i].classList.add("current-menu-item");
        } 

    }
    
}
highLightMenu();

Answer 2

The nav_menu_css_class filter can be used to add CSS classes to list items, so add in the necessary logic, and then add the class (tested):

add_filter( 'nav_menu_css_class', static function ( $classes, $menu_item ) {
    // Add class if post is assigned to category in nav menu.
    if ( 'taxonomy' === $menu_item->type && 'category' === $menu_item->object && in_category( $menu_item->object_id ) ) {
        $classes[] = 'current-menu-item';
    }

    return $classes;
}, 10, 2 );

Answer 3

Yes! Found a solution which is working fine for my case :)

if(window.location.href.indexOf("/blog/") > -1) {
   $('#menu-item-339').addClass('current-menu-item');
}
if(window.location.href.indexOf("/articles/") > -1) {
   $('#menu-item-241').addClass('current-menu-item');
}
if(window.location.href.indexOf("/forum/") > -1) {
   $('#menu-item-437').addClass('current-menu-item');
}

Solution found here