Highlight wp_nav_menu when category is selected

1 Views

Using the wp_nav_menu() function to display my menu I noticed the highlighting in the menu was working well for the pages I created (like archives.php) but not anymore when a date (date.php), category (category.php) or tag (tag.php) was selected.

How can I keep my “Browse” menu entry highlighted when a category is selected?

Read More

Here is how I include the menu in header.php: 

<div id="main-menu">
    <?php wp_nav_menu(array('menu' => 'primary', 'menu_class' => '', 'container' => false, 'theme_location' => 'header')); ?>
</div>

The Firebug excerpt when the archives page (called “Browse” in the menu) is selected, here it is the id “menu-item-299”: 

<div id="main-menu">
    <ul id="menu-primary" class="">
        <li id="menu-item-304" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-304">
        <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-280 current_page_item menu-item-299">
        <li id="menu-item-307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-307">
        <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
        <li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301">
    </ul>
</div>

And finally, when I selected a date, or a category: 

<div id="main-menu">
    <ul id="menu-primary" class="">
        <li id="menu-item-304" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-304">
        <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-299">
        <li id="menu-item-307" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-307">
        <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-300">
        <li id="menu-item-301" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-301">
    </ul>
</div>

The live version is accessible here: http://www.slyvain.fr/v2/?page_id=280

This being my first template, I am pretty sure I forgot or missed something but can’t figure it out, thank you very much for your help!

Post Views: 1

Related posts

1 comment

  1. one solution to your problem using jQuery( put this code in functions.php )

    <?php
add_action('wp_footer','ravs_browse_menu');
function ravs_browse_menu(){
 if(isset($_GET['cat']) && $_GET['cat'] !=''){
 ?>
 <script>
  jQuery(document).ready(function(){
   jQuery('#menu-item-299').addClass('current-menu-item');
  });
 </script>
 <?php
 }
}
?>

Comments are closed.