Question

我遇到了移动响应式引导程序菜单的问题。基本上菜单是向下滑动以显示子菜单，而是显示为下拉菜单，父菜单保持静态。

问题在于：http://benjaminbrooksguitar.ipage.com/test/home/

任何帮助将不胜感激。

     <nav id="nav" class="navbar header2 dropdown navbar-default navbar-static-top">
      <div class="container-fluid">
      <div class="nav-container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php bloginfo('url')?>"><img class="navbrand" src="<?php bloginfo('template_url')?>/l"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <?php
            wp_nav_menu( array(
              'theme_location' => 'top_menu',
              'depth' => 2,
              'container' => false,
              'menu_class' => 'nav navbar-nav',
              'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
              'walker' => new wp_bootstrap_navwalker())
            );
            ?>
          </ul>
        </div>

        </div>
      </div>
    </nav>

  </div>
</div>

Answer 1

让您更接近的一件事是您在<nav>元素上缺少一些CSS类。

nav id="nav" class="navbar header2 dropdown navbar-default navbar-static-top">

应切换到：

nav id="nav" class="navbar header2 dropdown collapse navbar-collapse navbar-responsive-collapse navbar-default navbar-static-top">

尝试使用这些更改并查看是否可以使某些功能正常运行。我必须跑，否则我会进一步研究。我明天会更新你的。

Answer 2

我认为你错过了这个bootstrap css设置

@media (max-width: 767px) { .navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none; } }

Bootstrap响应子菜单问题

2 个答案: