How merge primary and secondary bootstrap wp menu into one for mobile device

Question

I have two menu on header and in mobile device when I clicked on toggle button two menu appears but one menu appear on the top.I want to merge these two menus on one while I click on toggle button and expect to see both menu at once. I checked this topic Combining multiple Bootstrap menus into one for mobile? but don't work for me

<nav class="topmenu">
    <?php
        wp_nav_menu( array('menu' => 'top-menu','theme_location'=> 'topmenu','depth'=> 2,'container'=> 'div','container_class'=> 'collapse navbar-collapse navbar-ex1-collapse','fallback_cb'=>'wp_bootstrap_navwalker::fallback','walker'=> new wp_bootstrap_navwalker()));
    ?>
</nav>



<nav class="mainmenu">
    <!-- Brand and toggle get grouped for better mobile display -->
        <div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <?php
                wp_nav_menu( array('menu' => 'main-menu','theme_location'=> 'main-menu','depth'=> 2,'container'=> 'div','container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 'fallback_cb'=> 'wp_bootstrap_navwalker::fallback','walker' => new wp_bootstrap_navwalker()));
            ?>
       </div>
</nav>

score 0 · Answer 1 · answered Mar 14 '19 at 11:04

for those who have this issue I couldn't fix it by bootstrap changes but with a simple jQuery code it solved. You just need to move the first nav element to another nav element when click on toggle button

$(function() {
        $(".navbar-toggle").click(
            function(){ $(".topmenu").appendTo(".mainmenu"); }
        );
    });

How merge primary and secondary bootstrap wp menu into one for mobile device

1 Answers1