2

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 :D

1 Answer 1

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>
2
  • You're absolutely right, took a bit of fiddling to get the classes in the right place, but looks exactly like it should now. Thanks for the help :) Dec 8, 2015 at 16:03
  • No problem. Glad it worked out.
    – Will
    Dec 9, 2015 at 1:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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