I have created a navigation bar with Bootstrap on WordPress that has two separate menus that I want to collapse into one menu. I have these menus separated because I wanted a logo centered between them. The menus work, but when they collapse, my drop down isn’t clickable.

Here is my code:

 <section id="navbar">
           <div class="navbar-wrapper">
            <div class="navbar navbar-default" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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><!-- navbar-header -->

                <div class="logo"><img src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/SJ-circle.png" width="200px" height="200px" alt="Savvy Jack Wear" class="img-responsive center-block"></div>    

                <?php
                    wp_nav_menu( array(

                        'theme_location'    => 'menu-1',
                        'container'         => 'nav',
                        'container_class'   => 'navbar-collapse collapse',
                        'menu_class'        => 'nav navbar-nav navbar-left'
                    ));
                ?>


                <?php
                    wp_nav_menu( array(

                        'theme_location'    => 'menu-2',
                        'container'         => 'nav',
                        'container_class'   => 'navbar-collapse collapse',
                        'menu_class'        => 'nav navbar-nav navbar-right'
                    ));
                ?>



                </div><!-- container -->
            </div><!-- navbar -->


    </div><!-- navbar-wrapper -->
    </section>  

I’m not sure what needs to be changed? Is it the container class, the data-target, both, or something else entirely?

Thanks!

Read more here: Make two bootstrap menus collapse into one dropdown


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: