我在这个问题上玩得很开心。除了这对我来说一切都很好,所以希望我能得到一些反馈。我使用 twitter bootstrap 设计了一个静态网站,并对结构进行了很多改动。将其转换为动态的 wordpress 主题。我有一个 navbar-left 和 navbar-right ul,因为在较大的尺寸 (sm-lg) 上,徽标出现在导航栏的中心,左侧有 3 个链接,右侧有 3 个链接。
一切都很好,除非我尝试将我的样式应用于生成的 wp_nav_menu。我不太了解这部分内容,所以希望有一个简单的解释。我尝试将自定义 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_nav_menu
<?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'
) );
?>