CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstraptwitter-bootstrap-3
lowercase
lowercase

Reputation: 1220

Bootstrap menu with wp_bootstrap_navwalker float issue

I am using Bootstrap in wordpress and the wp_bootstrap_navwalker.php script to output my menu. It has some items left aligned ('primary' menu), and some right aligned ('social' menu) like so.

<div class="navbar navbar-default navbar-static-top">
<div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    </div><!--/.navbar-header -->

<?php
        wp_nav_menu( array(
            'menu'              => 'primary',
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'div',
            'container_class'   => 'collapse navbar-collapse',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>

<?php
wp_nav_menu(
    array(
        'menu'    => 'social',
        'theme_location' => 'social',
        'depth'          => 2,
        'container'      => false,
        'menu_class'     => 'nav navbar-nav navbar-right',
        'fallback_cb'    => 'wp_bootstrap_navwalker::fallback',
        'walker'         => new wp_bootstrap_navwalker()
    )
);
?>

</div><!--/.nav-collapse -->
  </div><!--/.container -->
</div><!--/.navbar -->

The problem is: the 'social' menu items should align right, which they do, but for some reason they are dropping down a line below the primary menu. I don't seem to be able to work out how to get both menus on the same line. Any ideas what I have wrong? Works fine as straight code, but when I try to implement my code into the wp_nav_menu arrays, it goes wrong.

For reference, the output page source is:

<div class="navbar navbar-default navbar-static-top">
<div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    </div><!--/.navbar-header -->

<div class="collapse navbar-collapse"><ul id="menu-main" class="nav navbar-nav"><li id="menu-item-1751" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1751 active"><a title="Home" href="http:///">Home</a></li>
<li id="menu-item-1750" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1750"><a title="About" href="http://about/">About</a></li>
<li id="menu-item-1749" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1749"><a title="Shows" href="http://shows/">Shows</a></li>
<li id="menu-item-1748" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1748"><a title="Music" href="http://music/">Music</a></li>
<li id="menu-item-1746" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1746"><a title="Video" href="http://video/">Video</a></li>
<li id="menu-item-1747" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1747"><a title="Lyrics" href="http://lyrics/">Lyrics</a></li>
<li id="menu-item-1745" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1745"><a title="Contact" href="http://contact/">Contact</a></li>
</ul></div>
<ul id="menu-social" class="nav navbar-nav navbar-right"><li id="menu-item-1852" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1852"><a title="Facebook" href="http://facebook.com">Facebook</a></li>
<li id="menu-item-1853" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1853"><a title="Twitter" href="http://twitter.com">Twitter</a></li>
<li id="menu-item-1854" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1854"><a title="Instagram" href="http://instagram.com">Instagram</a></li>
<li id="menu-item-1855" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1855"><a title="Youtube" href="http://youtube.com">Youtube</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container -->
</div><!--/.navbar -->

UPDATE: See that stray DIV tag after the first UL list? That seems to be the problem. How would I remove that DIV from the array?

Upvotes: 1

Views: 2316

Answers (1)

Howli
Howli

Reputation: 12469

Try:

<div class="collapse navbar-collapse">
<?php
        wp_nav_menu( array(
            'menu'              => 'primary',
            'theme_location'    => 'primary',
            'depth'             => 2,
            'container'         => 'false',
            'menu_class'        => 'nav navbar-nav',
            'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
            'walker'            => new wp_bootstrap_navwalker())
        );
    ?>

<?php
wp_nav_menu(
    array(
        'menu'    => 'social',
        'theme_location' => 'social',
        'depth'          => 2,
        'container'      => false,
        'menu_class'     => 'nav navbar-nav navbar-right',
        'fallback_cb'    => 'wp_bootstrap_navwalker::fallback',
        'walker'         => new wp_bootstrap_navwalker()
    )
);
?>
</div>

You were specifying to have a div around the first menu with 'container' => 'div', so I removed it from that and put that in around the two wp_nav_menu.

Upvotes: 2

Related Questions