I am using bs4navwalker, a script to output WordPress nav menus with proper Bootstrap formatting. In fact, rather than the usual wp-bootstrap-navwalker, I am using bs4navwalker, a variant.
Here is my HTML...
<!-- navigation -->
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth"> <!-- collapse at small breakpoint -->
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
Brand
</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!-- first nav -->
<ul class="nav navbar-nav mr-auto"> <!-- .mr-auto required to push second nav right http://stackoverflow.com/a/41769285/1375163 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/product1link/">Product 1</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Service 1</a>
<a class="dropdown-item" href="#">Service 2</a>
<a class="dropdown-item" href="#">Service 3</a>
<a class="dropdown-item" href="#">Service 4</a>
<a class="dropdown-item" href="#">Service 5</a>
<a class="dropdown-item" href="#">Service 6</a>
</div>
</li>
</ul>
<!-- second nav -->
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Clients
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Category 1</a>
<a class="dropdown-item" href="#">Category 2</a>
<a class="dropdown-item" href="#">Category 3</a>
<a class="dropdown-item" href="#">Category 4</a>
<a class="dropdown-item" href="#">Category 5</a>
<a class="dropdown-item" href="#">Category 6</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="btn btn-success pmd-ripple-effect btn-md" href="#" role="button">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Here is what that looks like...
And here is my current WordPress code to accomplish just the first menu...
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth"> <!-- collapse at small breakpoint -->
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
<!-- first nav -->
<?php
wp_nav_menu([
'menu' => 'primary',
'theme_location' => 'primary',
'container' => 'div',
'container_id' => 'bs4navbar',
'container_class' => 'collapse navbar-collapse',
'menu_id' => false,
'menu_class' => 'navbar-nav mr-auto',
'depth' => 2,
'fallback_cb' => 'bs4navwalker::fallback',
'walker' => new bs4navwalker()
]);
?>
</div>
</nav>
I want to include both. But I don't understand how to incorporate the second, adjacent menu using bs4navwalker in the appropriate place.
Both should be inside "collapse navbar-collapse", and that's what I can't see how to accomplish using this. When I have tested, it seems to repeat that div.
