在桌面和移动设备上使用引导程序菜单和navwalker时,我试图找到一个完美的中间位置。
我无法让它显示子子菜单项(即主菜单项有子项,其中一个孩子有子项)。一切都在手机上运行,但儿童不会在桌面上显示。
标题中的代码如下所示:
<nav class="navbar navbar-inverse bs-docs-nav col-md-9" role="banner">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-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' => 3,
'container' => 'nav',
'container_class' => 'navbar-collapse bs-navbar-collapse collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav no-gutter',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
如果我添加一些样式来启用悬停我只帮助桌面设备,因为没有像这样在移动设备上悬停:
.menu-item-has-children:hover ul.dropdown-menu {
display: block;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover {
background-color: $red-color !important;
}
任何想法如何实现?