twitter在WordPress的Bootstrap 3菜單

Question

我已經使用Bootstrap 3建立了一個模板，現在正在創建一個自定義的Wordpress主題。 我正在使用引導navwalker（https://github.com/twittem/wp-bootstrap-navwalker），以獲得主菜單工作，但似乎不能集成我的第二個導航。

我的結構是這樣的，並contans左對齊菜單和右對齊圖標菜單...

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

我能拿到第一navigtion偉大的工作，但不知道如何整合「社會-nav」。我的WordPress的代碼是...

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

任何想法如何得到正確對齊社會導航內容的工作嗎？

Answer 1

禁用的容器，而是寫你自己的容器div標籤一樣

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

這也許應該解決您的問題。有一個愉快的一天:)