0

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!

0

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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.