Bootstrap 4 WP Navwalker Multi-Level Dropdown

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>

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');
});