WordPress :Plusieurs menus bootstrap

WordPress :Plusieurs menus bootstrap

Petit mémo pour parvenir à faire fonctionner deux menus bootstrap sous wordpress.Je pars du principe qu’on a deja un premier menu et que notre thème supporte l’insertion d’un second menu.Si vous souhaitez rajouter une seconde zone de menu sur votre thème, reportez vous à ce petit mémo!

Voici un exemple de menu bootstrap sous wordpress:

         <nav class="navbar navbar-default" role="navigation">
                    <!-- Mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topnav-menu">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <nav id="topnav" class="clearfix" role="navigation">
                        <p id="topnav-icon"></p>
                        <?php
                        wp_nav_menu(array(
                            'theme_location' => 'secondary',
                            'container' => false,
                            'menu_id' => 'topnav-menu',
                             'menu_class' => 'collapse navbar-collapse main-nav',
                            'fallback_cb' => '',
                            'depth' =>3,
                              'walker' => new wp_bootstrap_navwalker()
                            )
                        );
                        ?>
                    </nav> 
                </nav>

L’attribut data-target

 

Ce qui risque de se passer si vous copier tel quel le code d’un menu pour le doubler, c’est qu’en cliquant sur un bouton en version mobile, soit les deux menus se dérouleront, un seul bouton sur les deux marchera.. bref, en fait la fonction js qui permet le déroulé du menu est invoquée dans l’attribut data-target=”” et elle cible la div ou la classe qu’on lui donne en valeur : ici je l’appelle topnav-menu.

Dans ma fonction wp_nav_menu et ses arguments, je prend en paramètre ‘menu_id’ et je lui fais correspondre mon ID => ‘topnav-menu’, pour faire le lien.
Dans mon second menu,  je change la cible de mon data-target , j’appelle cette fois la div #main-menu, je vais donc dans les arguments de ma deuxième fonction wp_nav_menu lier mon ‘menu_id’ à ma div  ‘main-menu’,

    <nav class="navbar navbar-default" role="navigation">
                                        <!-- Mobile display -->
                                        <div class="navbar-header">
                                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
                                                <span class="sr-only">Toggle navigation</span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                                <span class="icon-bar"></span>
                                            </button>
                                        </div>
                                        <nav role="navigation" class="site-navigation main-navigation">
                                            <?php
                                            wp_nav_menu(array('theme_location' => 'primary',
                                                'container' => false, 
                                                 'menu_class' => 'collapse navbar-collapse main-nav',
                                                 'fallback_cb' => '',
                                                'menu_id' => 'main-menu',
                                                'depth' => 3,
                                                'walker' => new wp_bootstrap_navwalker()));
                                            ?>
                                        </nav> 
                                    </nav>

Du coup les menus marchent bien en version mobile et sont bien indépendants l’un de l’autre. Bien sur vous devrez modifier le css pour ce nouveau menu.

 

mobilemenu

 

Leave a Reply

Your email address will not be published. Required fields are marked *