Bootstrap 4 WP Navwalker Multi-Level Dropdown

Question

Essentially i'm trying to make the WP Navwalker dropdown three levels instead of it's default 2.

I've found tutorials on this but they seem to be for Bootstrap 3 as I don't have the .dropdown-submenu class.

Here is an example of what i'm trying to do but this didn't work for me (i'm guessing because I don't have the .dropdown-submenu class)

https://joeybabcock.me/blog/html/bootstrap-multi-level-dropdown-menus-in-wordpress/

<div class="container header_primary py-4 fw-c">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 col-6 d-flex align-items-center">
            <a href="<?php bloginfo('url'); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/logo-black.png" alt=""></a>
        </div><!-- .site-branding -->

        <div class="col-lg-8 col-md-8 col-sm-6 col-6 header_navigation justify-content-end align-items-center">
            <nav class="primary_style navbar navbar-expand-lg navbar-expand-md navbar-light float-md-right d-md-flex d-block">
                <button class="navbar-toggler float-right" type="button" data-toggle="collapse" data-target="#bs4navbar1" aria-controls="mobileNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                 <?php
                 wp_nav_menu([
                     'menu'            => 'main-nav',
                     'theme_location'  => 'top',
                     'container'       => 'div',
                     'container_id'    => 'bs4navbar',
                     'container_class' => 'collapse navbar-collapse',
                     'menu_id'         => false,
                     'menu_class'      => 'navbar-nav',
                     'depth'           => 3,
                     'fallback_cb'     => 'bs4navwalker::fallback',
                     'walker'          => new bs4navwalker()
                 ]);
                 ?>
            </nav>
        </div>
    </div>

Answer 1

This actually worked perfectly for me with bootstrap 4 with the wp-bootstrap-navwalker... https://joeybabcock.me/blog/html/bootstrap-multi-level-dropdown-menus-in-wordpress/

I've never used the bs4navwalker, but I would assume that is causing your issue.

Some other things I'm using is Roots Bedrock framework, with a Roots sage theme. Worked like a charm. Here's where I put everything on my sage theme:

/resources/views/header.blade.php replacement for the menu function

{{ wp_nav_menu(['theme_location' => 'primary_navigation',
'depth'           => 3, // 1 = no dropdowns, 2 = with dropdowns, 3 = multilevel dropdowns
'container'       => 'div',
'container_class' => 'justify-content-end',
'container_id'    => 'bs-navbar-collapse-1',
'menu_class'      => 'nav navbar-nav text-capitalize',
'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
'walker'          => new WP_Bootstrap_Navwalker(),]) }}

/resources/assets/styles/layouts/_menus.scss at the very bottom

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu .dropdown-menu {
    top: 0; left: 95%; margin-top: -1px;
}
@media (max-width: 992px)
{
    .dropdown-menu {
        padding: .5rem 0;
        margin: .125rem 0 0;
    }
    li > ul > li > ul > li > .dropdown-item {
        padding: .25rem 3rem;
    }
    li > ul > li > ul > li > .dropdown-item:before {
        content: '• ';
    }
}

/resources/assets/scripts/routes/common.js in the "init()" function

$('.dropdown-menu > li > .dropdown-menu').parent().addClass('dropdown-submenu').find(' > .dropdown-item').attr('href', 'javascript:;').addClass('dropdown-toggle');
$('.dropdown-submenu > a').on("click", function(e) {
  var dropdown = $(this).parent().find(' > .show');
  $('.dropdown-submenu .dropdown-menu').not(dropdown).removeClass('show');
  $(this).next('.dropdown-menu').toggleClass('show');
  e.stopPropagation();
});
$('.dropdown').on("hidden.bs.dropdown", function() {
  $('.dropdown-menu.show').removeClass('show');
});