引導兩個導航欄，二級欄重疊主欄下拉

我有一個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; 
     } 
    } 
}

重疊圖像：