css - Wordpress 中的 Bootstrap 3 菜单

Question

我已经使用 Bootstrap 3 构建了一个模板，现在正在创建一个自定义 Wordpress 主题。 我正在使用 bootstrap navwalker ( https://github.com/twittem/wp-bootstrap-navwalker ) 让主菜单正常工作，但似乎无法集成我的第二个导航。

我的结构是这样的，包含一个左对齐的菜单和一个右对齐的图标菜单...

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

我可以很好地使用第一个导航，但不确定如何集成“社交导航”。我的 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>

关于如何让正确对齐的 Social-Nav 内容也能正常工作有什么想法吗？

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>

这应该可以解决您的问题。祝你有美好的一天:)