Bootstrap's mobile menu in Wordpress is opened by default and doesn't close

Question

I am integrating Bootstrap's navbar in my Wordpress custom template using Bootstrap navwalker

The menu works on desktop, but when I resize the browser to the mobile view, the mobile menu is opened by default and clicking on the bars icon doesn't do anything.

I have nothing in my app.js that is interfering with the navbar.

EDIT I just noticed that the parent div <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> of the ul menu is missing from the HTML output.

<nav class="navbar navbar-default">
    <div class="container" id="main-menu">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BRAND</a>
        </div>
        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 4,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav navbar-left',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
        ); ?>
    </div>
</nav>

The HTML Output of the menu is as follow, the parent div of the ul is missing

<nav class="navbar navbar-default">
    <div class="container" id="main-menu">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">BRAND</a>
        </div>
        <ul id="menu-main" class="nav navbar-nav navbar-left">
             <li class="active menu- active"><a href="http://localhost/technia/"><i class="fa fa-home"></i></a></li>

             <li class="menu-science dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Science <span class="caret"></span></a>
                  <ul role="menu" class=" dropdown-menu">
                         <li class="menu-tech"><a title="Tech" href="http://localhost/technia/category/tech/">Tech</a></li>
                  </ul>
             </li>

             <li class="menu-vr"><a title="VR" href="http://localhost/technia/category/vr/">VR</a></li>

             <li class="menu-physics"><a title="Physics" href="http://localhost/technia/category/physics/">Physics</a></li>

             <li class="menu-medicine"><a title="Medicine" href="http://localhost/technia/category/medicine/">Medicine</a></li>

        </ul>       
   </div>
</nav>

Answer 1

I solved it by adding the missing div manually

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <?php
            wp_nav_menu( array(
                    'menu'              => 'primary',
                    'theme_location'    => 'primary',
                    'depth'             => 2,
                    'container'         => 'div',
                    'container_class'   => 'collapse navbar-collapse',
                    'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
                    'walker'            => new WP_Bootstrap_Navwalker())
            ); ?>
</div>