Question

我在rails应用程序上有两个引导程序导航栏。主栏具有用户操作的下拉列表（注销，用户配置文件等）。但是，下拉菜单与辅助栏重叠。

此外，如果我减小了视口的大小，则辅助栏会折叠，但主栏的操作不会显示在折叠菜单中。我该如何解决？

我的导航栏代码：

  <nav role="navigation" class="navbar navbar-fixed-top firstnavbar">
      <div class="container">
          <div class="navbar-header">
              <a class="navbar-brand" rel="home" href="#" title="Sickbubble">
              <%= link_to(image_tag("cropped-sickbubble-logo-beta-3"),root_path) %>
              </a>
          </div>
          <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav navbar-right">
                <% if user_signed_in? %>
                  <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"><%= image_tag current_user.profile_image %> <%= "#{current_user.name}" %>
                    <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                      <li><a href="#">HTML</a></li>
                      <li><a href="#">CSS</a></li>
                      <li><%= link_to 'Log out', destroy_user_session_path, method: :delete %></li>
                    </ul>
                  </div>
                <% else %>
                  <li><%= link_to 'Log In', new_user_session_path %></li>
                  <li><%= link_to 'Register', new_user_registration_path %></li>
                <% end %>
              </ul>
          </div>
      </div>
  </nav>
  <nav role="navigation" class="navbar navbar-default navbar-fixed-top secondnavbar">
    <div class="container">
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <div id="navbarCollapse" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
              <li><%= link_to "Categories", root_path %></li>
              <li><%= link_to "Businesses", businesses_path %></li>
              <li><%= link_to "Near me", geolocation_path, "data-no-turbolink": true %></li>
          </ul>
      </div>
    </div>
  </nav>

自定义css：

.firstnavbar {
  background-color: #282828;
  border-radius: 0px;
  border: 0px;
  min-height:53px;
  color: #ffffff;
  margin-bottom: 0px;
  ul.nav.navbar-nav, li  {
    font-weight: 400;
    a {
      color: #FFFFFF;
      background-color: #282828;
    }
    a:hover {
      background-color: #EEEEEE;
      color: #282828;
    }
  }
}

.secondnavbar
 {
    background-color: #FFFFFF;
     top: 50px;
     ul.nav.navbar-nav, li  {
       font-weight: 400;
       a {
         color: #282828;
         background-color: #FFFFFF;
       }
       a:hover {
         background-color: #EEEEEE;
       }
     }
 }

重叠图片：

响应式菜单栏未显示退出：

Answer 1

将辅助导航的z-index设置为小于主导航的z-index（默认为z-index: 1000）：

.secondnavbar {
  z-index: 990;
}

Answer 2

尝试将<div class="row"></div>放在导航栏周围，这就是我一直用导航栏做的事情。

Bootstrap两个导航栏，辅助栏重叠主栏下拉列表

2 个答案: