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.
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:
