1

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

enter image description here

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.

  • Do you feel it's a WordPerss problem? – Max Yudin Mar 11 '17 at 21:50
1

Answer from elsewhere has it:

"Write the div with class "collapse navbar-collapse" as html-code and set "container" to false in your array. After that you can call two different menus within the container."

Doesn't get around the fact that my last nav item is actually a button, but answers the question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.