How can I put two menus in the same div?

by

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

this is the html version:html version of menu

And this is my result so far in wordpress:wordpress version of menu

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 😀

1 Answer
1

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>

Leave a Comment