Understrap Sub Menu Depth

Understrap supports sub menus in their navbars, however what happens if the sub menus have sub menus of their own?

Unfortunately Understrap only supports collapsable menus of depth 2 (meaning that you can’t make the sub sub-menus collapsable).

This is how to increase the depth of your menus by displaying them when the dropdown sub menu containing them is expanded.

Update:

With Understrap v1.1.0 adding Bootstrap 5 support any child themes created using the up-to-date child theme provided should go here:

Understrap 1.1 Sub Menu Depth

For child themes created before V1.1.0 the information below should still be useful.

Old Version:

First import the file “class-wp-bootstrap-navwalker.php” from the Understrap parent theme under “\inc\class-wp-bootstrap-navwalker.php”

Then alter this line of code within:

// 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 ) {
					$atts['class'] = 'dropdown-item';
				} else {
					$atts['class'] = 'nav-link';
				}
			}

Into this by removing ” && 0 === $depth”:

// If item has_children add atts to <a>.
			if ( isset( $args->has_children ) && $args->has_children && $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 ) {
					$atts['class'] = 'dropdown-item';
				} else {
					$atts['class'] = 'nav-link';
				}
			}

Then add to your header (or wherever else your adding your navbar) a dropdown menu of depth 3:

			<div class="container">
				<?php wp_nav_menu(
	array(
		'theme_location'  => 'secondary',
		'container_class' => 'collapse navbar-collapse',
		'container_id'    => 'navbarNavDropdown',
		'menu_class'      => 'navbar-nav mx-auto',
		'fallback_cb'     => '',
		'menu_id'         => 'secondary',
		'depth'           => 3,
		'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
	)
); ?>
			</div>

Then finally add the following Additional CSS:

/**
 * Forces sub-sub menu's
 * to display when sub menu
 * is displayed!
 */
ul.dropdown-menu li > ul.dropdown-menu{
    display: inline-grid;
}
ul.dropdown-menu li>ul {
    position: static!important;
}

And you should get something like this: