twitter Bootstrap 3 menu in Wordpress

Question

I've built a template using Bootstrap 3 and am now creating a custom Wordpress theme. I am using the bootstrap navwalker (https://github.com/twittem/wp-bootstrap-navwalker) to get the main menu working but cant seem to integrate my second navigation.

My structure is like this and contans a left-aligned menu AND a right aligned icon menu...

<nav class="navbar navbar-default" role="navigation">
     <div class="container" id="main-navigation">

        <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           </button>
        </div><!-- end navbar-header-->

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
           <ul class="nav navbar-nav">
              <li class="active"><a href="/">HOME</a></li>
              <li><a href="/news/">NEWS</a></li>
              <li><a href="/releases/">RELEASES</a></li>
              <li><a href="/artists/">ARTISTS</a></li>
              <li><a href="/events/">EVENTS</a></li>
              <li><a href="/video/">VIDEO</a></li>
              <li><a href="/about/">ABOUT</a></li>
              <li><a href="/contact/">CONTACT</a></li>
           </ul>
           <ul class="nav navbar-nav navbar-right" id="social-nav">
              <li><a href="#" target="_blank"><img src="img/icon-facebook.png" alt="Facebook"></a></li>
              <li ><a href="#" target="_blank"><img src="img/icon-twitter.png" alt="Twitter"></a></li>
              <li><a href="#" target="_blank"><img src="img/icon-instagram.png" alt="Instagram"></a></li>
              <li><a href="#" target="_blank"><img src="img/icon-youtube.png" alt="Youtube"></a></li>
              <li><a href="#" target="_blank"><img src="img/icon-pinterest.png" alt="Pinterest"></a></li>
           </ul>
        </div><!-- end navbar-collapse-1 -->

     </div><!-- end container main-navigation-->
  </nav>

I can get the first navigtion working great, but not sure how to integrate the "social-nav". My wordpress code is...

<nav 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-ex1-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>

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

Any ideas how to get the right aligned Social-Nav contents working too?

Answer 1

disable the container and instead write your own container div tag like

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <?php
        wp_nav_menu(array(
        'theme_location' => 'primary',
        'container' => false,
        'menu_class' => 'nav navbar-nav',
        'fallback_cb' => false,
        'walker' => new wp_bootstrap_navwalker()
        ));
    ?>
    <ul class="nav navbar-nav navbar-right" id="social-nav">
        <li><a href="#" target="_blank"><img src="img/icon-facebook.png" alt="Facebook"></a></li>
        <li ><a href="#" target="_blank"><img src="img/icon-twitter.png" alt="Twitter"></a></li>
        <li><a href="#" target="_blank"><img src="img/icon-instagram.png" alt="Instagram"></a></li>
        <li><a href="#" target="_blank"><img src="img/icon-youtube.png" alt="Youtube"></a></li>
        <li><a href="#" target="_blank"><img src="img/icon-pinterest.png" alt="Pinterest"></a></li>
    </ul>
</div>

This should probably solve your problem. Have a nice day :)