在wordpress中使用navwalker bootstrap菜单

时间:2015-01-19 11:57:55

标签: html css wordpress twitter-bootstrap

在桌面和移动设备上使用引导程序菜单和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;
}

任何想法如何实现?

0 个答案:

没有答案