html - Bootstrap 两个导航栏，辅助栏与主栏下拉菜单重叠

Question

我在 Rails 应用程序上有两个 Bootstrap 导航栏。主栏有一个用于用户操作(注销、用户配置文件等)的下拉菜单。但是，下拉菜单被辅助栏重叠。

此外，如果我减小视口(viewport)的大小，辅助栏会折叠，但主栏的操作不会出现在折叠菜单中。我该如何解决？

我的导航栏代码:

  <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;
}