3 Level Deep Navigation Menu Not Showing All Levels

Question

I have a 3 level deep navigation menu which will show beside all pages on the site except the homepage. The issue is only 2 of my 3 levels are showing in the menu when displaying it using the wp_nav_menu. I've tried specifying the depth parameter and without it to no avail. I am using the Roots theme if that helps.

See below for an image as to how the menu is in the Appearance > Menus section.

The problem as can be seen from above is that "Production Solutions" and "Avalanche" are showing, but the children items underneath Avalanche aren't showing. And it's not a styling thing either the 3rd levels just aren't being output at all. I'm not using any custom walkers or anything either, this is via stock register and display nav menu functions.

This is the code that registers all of my nav menus:

register_nav_menus(array(
    'accordion_navigation' => __('Page Accordion Navigation', 'roots'),
    'footer_navigation_left' => __('Footer Navigation Left', 'roots'),
    'footer_navigation_solutions' => __('Footer Product Solutions', 'roots'),
    'footer_navigation_news' => __('Footer News & Events', 'roots'),
    'footer_navigation_about' => __('Footer About', 'roots')
));

In my page template I have this code for displaying the menu:

wp_nav_menu(array('theme_location' => 'accordion_navigation'));

Am I missing something here?

Answer 1

I finally solved the issue, it was due to a default value in the Roots theme overriding the depth parameter for a hook called wp_nav_menu_args (which I didn't even know was a hook). The code can be found in the root directory of the theme in the "inc" folder, a file called roots-cleanup.php.

The original code looks like this:

function roots_nav_menu_args($args = '') {
  $args['container']  = false;
  $args['depth']      = 2;
  $args['items_wrap'] = '<ul class="nav">%3$s</ul>';
  if (!$args['walker']) {
    $args['walker'] = new Roots_Nav_Walker();
  }
  return $args;
}

As you can all see, the depth value is being set as 2, even specifying a depth parameter on the wp_nav_menu function doesn't seem to make a different, this very function is overriding menu arguments for depth.

All I did was increase the depth to a higher value I would never ever reach of 8 like so:

function roots_nav_menu_args($args = '') {
  $args['container']  = false;
  $args['depth']      = 8;
  $args['items_wrap'] = '<ul class="nav">%3$s</ul>';
  if (!$args['walker']) {
    $args['walker'] = new Roots_Nav_Walker();
  }
  return $args;
}

The lesson learned here is to ALWAYS make sure a plugin or in this case a theme framework hook isn't changing something. I hope this helps someone else using the Roots theme and trying for multi-level menus.

Answer 2

If deeper menu exists in HTML but it doesn't shows on hover, add this code into your CSS file:

.dropdown-menu li:hover a+ul {
     display: block;
     top: 80%; // optional
}