バックグラウンドのハンバーガーメニュー項目の背景

Question

私は非xs画面で半透明の背景で正しくスタイルされたナビゲーションバーを持っていますが、ハンバーガーメニューに切り替えると、後続のメニュー項目には背景がなくなり、読みにくい。 （理由は「男のルール」は、透明な背景を持っている画像では、それはホバーされていることである。）

は、私は私が持っているこれらすべて同じ$transparent-black背景を与えるための方法を見つけるのが大好きですメインナビゲーションバー（私はSASSを使用しています）。ここで

は、ナビゲーションバーのための私のhtml /エルブ：

<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation"> 
    <div class="container-fluid"> 
    <div class="navbar-header"><a class="navbar-brand" href="/"><%= image_tag 'LogoTextWhite.png', style: "height: 50px; margin-top: -15px" %></a> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> 
    </div> 
    <div class="collapse navbar-collapse navbar-menubuilder"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><%= link_to 'Man Rules', rules_path %></li> 
     <li><%= link_to 'BBQ', home_bbq_path %></li> 
     <li><%= link_to 'Jokes', home_jokes_path %></li> 
     <li><%= link_to 'Lifehacks', home_lifehacks_path %></li> 
     <% if current_user %> 
      <li><%= link_to user_path(current_user) do %> 
      My Mancard <span style="background-color: red; padding-left: 5px; padding-right: 5px; border-radius: 7px"><%= current_user.manpoints %></span> 
      <% end %></li> 
     <% else %> 
      <li><%= link_to 'Log In', new_user_session_path %></li> 
     <% end %> 
     </ul> 
    </div> <!-- collapse --> 
    </div> <!-- container-fluid --> 
</div> <!-- custom-bootstrap-menu --> 

そして、ここでは私のSCSSです：

/* NAVIGATION */ 
#custom-bootstrap-menu { 
    position: absolute; 
    width: 100%; 
    height: 80px; 
    padding-top: 15px; 
} 

#custom-bootstrap-menu.navbar { 
    margin-bottom: 0px !important; 
    z-index: 10 !important; 
} 

#custom-bootstrap-menu.navbar-default .navbar-brand { 
    color: white; 
} 

#custom-bootstrap-menu.navbar-default { 
    font-size: 18px; 
    font-family: $font-sans; 
    font-weight: 900; 
    background-color: $transparent-black !important; 
    border: none; 
    border-radius: 0px; 
} 

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a { 
    color: white; 
    height: 80px; 
    margin-top: -15px; 
    line-height: 50px; 
} 

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover, 
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus { 
    color: white; 
    background-color: $transparent-black !important; 
} 

#custom-bootstrap-menu.navbar-default .navbar-toggle { 
    border-color: white; 
} 

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover, 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus { 
    background-color: $transparent-black; 
} 

#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar, 
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar { 
    background-color: $transparent-black; 
} 

#custom-bootstrap-menu.navbar-default .navbar-toggle { 
    border-color: white !important; /* Change border color around this buttons */ 
} 

#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar { 
    background: white !important; /* Change color for horizontal lines */ 
} 

誰も私はこの1つを把握助けることができますか？私はthisとthisのようなSOの投稿を見てきましたが、まだそれを動作させることはできません。あなたがxsメニューのその厄介な白い線を取り除くのを助けることができるならば、ボーナスポイント。

Answer 1

これは私が最近のプロジェクトで使用した解決策です。ここ

.navbar-collapse.in { 
    background: RGBA(0,0,0,0.85); 
} 

キーはナビゲーションが表示されたときにブートストラップJSを介して適用される.inである（もちろん、崩壊）。