navigation - How can I put two menus in the same div?

I'm converting an html5 site into a wordpress theme, but have got stuck with my menus!

this is the html version:

And this is my result so far in wordpress:

as you can see I can't get the social menu inline with the main menu!

This is the function.php bit:
function register_my_menus() { register_nav_menus( array( 'header-menu' => __( 'Header Menu' ), 'top-left-menu' => __( 'Top Left Menu' ), 'social-menu' => __( 'Social Menu' ) ) ); } add_action( 'init', 'register_my_menus' );

and this is the header.php bit:

    <div class="navbar navbar-fixed-top" 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-->


            <?php 
                wp_nav_menu( array(

                    'theme_location'    =>  'top-left-menu',
                    'container'         =>  'nav',
                    'container_class'   =>  'navbar-collapse collapse dropdown',
                    'menu_class'        =>  'nav navbar-nav navbar-left',
                    'container_id' => 'cssmenu', 
                    'walker' => new CSS_Menu_Walker()
                )
                );
            ?>
            <?php 
                wp_nav_menu( array(

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


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



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

Is it possible to create these on the same line? In bootstrap it was a simple div with a navbar-left and navbar-right class, but I can't work it out in Wordpress!

Any help would be very gratefully recieved :D

I'm converting an html5 site into a wordpress theme, but have got stuck with my menus!

this is the html version:

And this is my result so far in wordpress:

as you can see I can't get the social menu inline with the main menu!

This is the function.php bit:
function register_my_menus() { register_nav_menus( array( 'header-menu' => __( 'Header Menu' ), 'top-left-menu' => __( 'Top Left Menu' ), 'social-menu' => __( 'Social Menu' ) ) ); } add_action( 'init', 'register_my_menus' );

and this is the header.php bit:

    <div class="navbar navbar-fixed-top" 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-->


            <?php 
                wp_nav_menu( array(

                    'theme_location'    =>  'top-left-menu',
                    'container'         =>  'nav',
                    'container_class'   =>  'navbar-collapse collapse dropdown',
                    'menu_class'        =>  'nav navbar-nav navbar-left',
                    'container_id' => 'cssmenu', 
                    'walker' => new CSS_Menu_Walker()
                )
                );
            ?>
            <?php 
                wp_nav_menu( array(

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


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



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

Is it possible to create these on the same line? In bootstrap it was a simple div with a navbar-left and navbar-right class, but I can't work it out in Wordpress!

Any help would be very gratefully recieved :D

• menus
• navigation

Share Improve this question asked Dec 7, 2015 at 22:43 Benn MoffatBenn Moffat 5311 gold badge22 silver badges66 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Try setting 'container' => false, in the wp_nav_menu() options array and using your own HTML to wrap the output.

<div class="outer-container-whatever-bootstrap-classes">
    <nav class="navbar-left other-classes">
        <?php 
            wp_nav_menu( array( [your_options with 'container' => false,] ) )' 
        ?>  
    </nav>
    <nav class="navbar-right other-classes">
        <?php 
            wp_nav_menu( array( [your_options with 'container' => false,] ) )' 
        ?>  
    </nav>
</div>