Make two bootstrap menus collapse into one dropdown

Question

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!

Answer 1

I had the same problem, the solution is quite simple. Add to your menus arrays such thing:

to the left menu

'container_id'    => 'navbarNavDropdown-left',

to the right menu

'container_id'    => 'navbarNavDropdown-right',

And you have just change your data-target to:

data-target="#navbarNavDropdown-left,#navbarNavDropdown-right"