0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.