将自定义引导导航菜单（自定义ID/类）集成到Wordpress（wp_导航菜单）中

我在这件事上玩得很开心。除此之外的一切对我都很有效，所以希望我能得到一些反馈。我使用twitter引导设计了一个静态网站，并对其结构做了很多修改。将其转换为动态wordpress主题。我有一个左导航栏和右导航栏ul，因为在较大尺寸（sm lg）上，徽标显示在导航栏的中心，左侧有3个链接，右侧有3个链接

除了我尝试将我的样式应用到生成的wp_nav_菜单时，所有这些都非常有效。我真的不明白这部分，所以希望能有一个简单的解释。我曾尝试将自定义css添加到菜单中（基本上是在Wordpress中将其添加到每个菜单项中），但没有成功。我也知道需要安装导航助行器，这没有问题。下面是它的HTML：

          <!-- Collect the nav links, forms, and other content for toggling -->

            <div id="navbar-collapse-main" class="collapse navbar-collapse">
                <ul id="left-side-nav" class="nav navbar-nav navbar-left">
                    <li><a class="nav-links" href="page-home.php">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle nav-links" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-links" href="#">Drink Menu</a></li>
                            <li><a class="dropdown-links" href="#">Food Menu</a></li>
                            <li><a class="dropdown-links" href="#">Specials</a></li>
                        </ul>
                    </li>
                    <li><a class="nav-links" href="#">Order</a></li>
                </ul>
                <!-- /#left-side-nav -->

                <ul id="right-side-nav" class="nav navbar-nav navbar-right">
                    <li><a class="nav-links" href="#">Catering</a></li>
                    <li><a class="nav-links" href="#">Our Story</a></li>
                    <li><a class="nav-links" href="#">Contact</a></li>
                </ul>
                <!-- /#right-side-nav -->
            </div>
            <!-- /.navbar-collapse --> 
        </div>
        <!-- /.container -->
    </nav>
    <!-- /#main-nav -->

这是wp_导航菜单

            <?php 
            wp_nav_menu( array(
                'theme_location'        => 'primary',
                'container'             => 'nav', 
                'container_id'          => 'navbar-collapse-main',
                'container_class'       => 'collapse navbar-collapse',
                'menu_class'            => 'navbar-right navbar-left'
                ) );
            ?>

---

此函数的参数几乎都是字符串，所以据我所知，您不能使用它同时调用两个菜单

我会这样做：

<div id="navbar-collapse-main" class="collapse navbar-collapse">
<?php
wp_nav_menu( array(
                'menu'        => 'YOUR_MENU_ID',
                'menu_id'     => 'left-side-nav',
                'menu_class'  => 'navbar-left'
            ) );
wp_nav_menu( array(
                'menu'        => 'YOUR_MENU_ID',
                'menu_id'     => 'right-side-nav',
                'menu_class'  => 'navbar-right'
            ) );
?>
</div>

---

您可以在菜单管理页面的“屏幕选项”中调整“CSS类”选项，然后可以向菜单项添加自定义类。

我返回并添加：该建议有效地使菜单正常工作。我唯一的问题是链接样式不能正常工作。导航链接和下拉链接要特别。Google字体不适用，颜色/悬停颜色不适用您可以尝试将CSS编辑为以下内容：使用navbar nav>li>a代替类导航链接，使用.下拉菜单>li>a代替下拉链接。或者你可以用javascripti添加这些类，我不知道你是否注意到了，但是自定义类被添加到了li标记中，所以你必须编辑你的CSS，不管怎样，它们被添加到锚标记中。我终于明白了，谢谢！