Comment avoir deux menus en utilisant Bootstrap nav walker?
J'utilise bs4navwalker , un script permettant d'afficher les menus de navigation WordPress avec le formatage Bootstrap approprié. En fait, plutôt que l’habituel wp-bootstrap-navwalker , j’utilise bs4navwalker , une variante.
Voici mon 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>
Voici à quoi ça ressemble ...
Et voici mon code WordPress actuel pour accomplir uniquement le premier 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>
Je veux inclure les deux. Mais je ne comprends pas comment incorporer le deuxième menu adjacent en utilisant bs4navwalker au bon endroit.
Les deux devraient être dans "collapse navbar-collapse", et c'est ce que je ne vois pas comment accomplir en utilisant ceci. Quand j'ai testé, il semble répéter cette div.
Réponse de ailleurs a-t-il:
"Ecrivez le div avec la classe" collapse navbar-collapse "sous la forme html - et définissez" conteneur "sur false dans votre tableau. Vous pourrez ensuite appeler deux menus différents dans le conteneur."
Ne contourne pas le fait que mon dernier élément de navigation est en fait un bouton, mais répond à la question.