我正在使用bs4navwalker, 输出具有正确引导格式的WordPress导航菜单的脚本。事实上,与往常不同wp-bootstrap-navwalker, 我正在使用bs4navwalker, 变体。
这是我的HTML。。。
<!-- navigation -->
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth"> <!-- collapse at small breakpoint -->
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
Brand
</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!-- first nav -->
<ul class="nav navbar-nav mr-auto"> <!-- .mr-auto required to push second nav right http://stackoverflow.com/a/41769285/1375163 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="/product1link/">Product 1</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Service 1</a>
<a class="dropdown-item" href="#">Service 2</a>
<a class="dropdown-item" href="#">Service 3</a>
<a class="dropdown-item" href="#">Service 4</a>
<a class="dropdown-item" href="#">Service 5</a>
<a class="dropdown-item" href="#">Service 6</a>
</div>
</li>
</ul>
<!-- second nav -->
<ul class="nav navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Clients
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Category 1</a>
<a class="dropdown-item" href="#">Category 2</a>
<a class="dropdown-item" href="#">Category 3</a>
<a class="dropdown-item" href="#">Category 4</a>
<a class="dropdown-item" href="#">Category 5</a>
<a class="dropdown-item" href="#">Category 6</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="btn btn-success pmd-ripple-effect btn-md" href="#" role="button">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
下面是它的样子。。。
这是我目前的WordPress代码,只需完成第一个菜单。。。
<nav class="navbar fixed-top navbar-toggleable-sm navbar-light cxt-bg-white pmd-z-depth"> <!-- collapse at small breakpoint -->
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="<?php echo esc_url( home_url( \'/\' ) ); ?>"><?php bloginfo( \'name\' ); ?></a>
<!-- first nav -->
<?php
wp_nav_menu([
\'menu\' => \'primary\',
\'theme_location\' => \'primary\',
\'container\' => \'div\',
\'container_id\' => \'bs4navbar\',
\'container_class\' => \'collapse navbar-collapse\',
\'menu_id\' => false,
\'menu_class\' => \'navbar-nav mr-auto\',
\'depth\' => 2,
\'fallback_cb\' => \'bs4navwalker::fallback\',
\'walker\' => new bs4navwalker()
]);
?>
</div>
</nav>
我想把两者都包括在内。但我不明白如何在适当的位置使用bs4navwalker合并第二个相邻菜单。
两者都应该在“collapse-navbar-collapse”中,而这正是我无法看到的。当我进行测试时,它似乎重复了这个div。