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?

Sovit Tamrakar · Accepted Answer · 2013-12-17 07:17:14Z

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

answered Dec 17, 2013 at 7:17

Sovit Tamrakar

3311 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lowercase Over a year ago

Unfortunately that doesn't seem to work. It stops the responsive mobile menu from working... It works perfectly for the main navigation viewable on desktop, but when the nav collapses for mobile, the button to drop down menu doesn't do anything. Any ideas? Seems I must be missing something?

Collectives™ on Stack Overflow

twitter Bootstrap 3 menu in Wordpress

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related