Understrap Theme Sub-Menu Looks Odd

Question

I'm using the Understrap theme on my Wordpress website and trying to implement a submenu (here www.irricad.com, the "Videos" entry in the "Support" menu).

As you can see, the submenu draws on top of the main menu obscuring some of the entries and preventing proper navigation. I'd like it to display to the right like a 'proper' sub-menu (and preferrably have the little arrow indicating a sub-menu).

The sub-menu has the same class as the main menu item, so I don't know how to make it display differently. Do I need some extra CSS? is there something I've missed in the menu configuration in the back-end? What lets Wordpress know this is a submenu, other than the nesting level, if it doesn't get a distinct class?

Kyudos Kyudos · Accepted Answer · 2021-04-15T02:47:50

I figured it out. I changed my theme header menu depth to 3:

<!-- The WordPress Menu goes here -->
<?php wp_nav_menu(
    array(
      'theme_location'  => 'primary',
      'container'       => 'div',
      'container_class' => 'collapse navbar-collapse',
      'container_id'    => 'navbarNavDropdown',
      'menu_class'      => 'navbar-nav ml-auto',
      'fallback_cb'     => 'Understrap_WP_Bootstrap_Navwalker::fallback',
      'menu_id'         => 'main-menu',
      'depth'           => 3,
      'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
    )
  ); ?>

I changed my navwalker.php to this (to add the toggle style to a child with children):

// If item has_children add atts to <a>.
if (isset($args - > has_children) && $args - > has_children && 0 === $depth && $args - > depth !== 1) {
  $atts['href'] = '#';
  $atts['data-toggle'] = 'dropdown';
  $atts['aria-haspopup'] = 'true';
  $atts['aria-expanded'] = 'false';
  $atts['class'] = 'dropdown-toggle nav-link';
  $atts['id'] = 'menu-item-dropdown-'.$item - > ID;
} else {
  $atts['href'] = !empty($item - > url) ? $item - > url : '#';
  // Items in dropdowns use .dropdown-item instead of .nav-link.
  if ($depth > 0) {
    if ($args - > has_children) {
      $atts['class'] = 'dropdown-toggle';
    } else {
      $atts['class'] = 'dropdown-item';
    }
  } else {
    $atts['class'] = 'nav-link';
  }
}

And finally added this style to position the submenu:

    .navbar-expand-md .navbar-nav ul.dropdown-menu> li > ul.dropdown-menu {
        position: absolute;
        top:0px;
        border-radius: 0;
        left: 100%;
        padding-top:0;
        padding-bottom:0;
        min-width: 150px;
    }

Understrap Theme Sub-Menu Looks Odd

1 Answers