CODEWITHSUNDEEP
wordpresswp-nav-walkerwp-nav-menu-item
Franz
Franz

Reputation: 137

WP Bootstrap Navwalker not displaying 'current-menu-item' class

The li that WP Bootstrap Navwalker generates doesn't include "current-menu-item" class causing me problem styling the current active menu item.

I added the code below in my functions.php file but it's not working because the li don't have 'current-menu-item' class to begin with.

function special_nav_class ($classes, $item) {
  if (in_array('current-menu-item', $classes) ){
    $classes[] = 'active ';
  }
  return $classes;
}

I also tried declaring a global variable $myNav and then assigned the whole wp_nav_menu code block but still not working.

Here's how my wp_nav_menu code inside my header.php file look like.

<?php
  wp_nav_menu( array(
    'theme_location'  =>    'primary-menu',
    'depth'           =>    1, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       =>    'div',
    'container_class' =>    'collapse navbar-collapse',
    'container_id'    =>    'nav-bar',
    'menu_class'      =>    'navbar-nav mr-auto',
    'fallback_cb'     =>    'WP_Bootstrap_Navwalker::fallback',
    'walker'          =>    new WP_Bootstrap_Navwalker(),
) );
?>

Here's my functions.php file.

// Register Custom Navigation Walker
if ( ! file_exists( get_template_directory() . '/class-wp-bootstrap-navwalker.php' ) ) {
    // file does not exist... return an error.
    return new WP_Error( 'class-wp-bootstrap-navwalker-missing', __( 'It appears the class-wp-bootstrap-navwalker.php file may be missing.', 'wp-bootstrap-navwalker' ) );
} else {
    // file exists... require it.
    require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);

function special_nav_class ($classes, $item) {
  if (in_array('current-menu-item', $classes) ){
    $classes[] = 'active ';
  }
  return $classes;
}

// Register WordPress nav menu
register_nav_menu('top', 'Top menu');

Here's how it looks like when I inspect element on the output HTML.

<div id="nav-bar" class="collapse navbar-collapse">
  <ul id="menu-main-menu" class="navbar-nav mr-auto">
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11 nav-item">
      <a title="Home" href="#home-page" class="nav-link">Home</a>
    </li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12 nav-item">
      <a title="Our Company" href="#our-company" class="nav-link">Our Company</a>
    </li>
    <li itemscope="itemscope" itemtype="https://www.schema.org/SiteNavigationElement" id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13 nav-item">
      <a title="Our Products" href="#our-products" class="nav-link">Our Products</a>
    </li>
  </ul>
</div>

My goal is to get the navwalker to generate current-menu-item class in the active li so I can style it properly.

Upvotes: 0

Views: 2238

Answers (2)

David Salcer
David Salcer

Reputation: 61

Note: I will just add it here in case somebody would be going around the hot pot same as me without a solution.

I forgot that I had all pages as "User links" in the menu. WP cant know that its the current page in general I think - unless you build some URL parsing.

Once I redo the menu links as WP pages it started to work on its own.

Upvotes: 0

Utku Turna
Utku Turna

Reputation: 9

I think you just missed a dot here and you delete "current-menu-item" class. 

function special_nav_class ($classes, $item) {
  if (in_array('current-menu-item', $classes) ){
    // instead of $classes[] = 'active ';
    $classes[] .= ' active';
  }
  return $classes;
}

Upvotes: 0

Related Questions