부트 스트랩의 햄버거 메뉴 항목에 대한 배경 정보

Question

비 -xs 화면에서 반투명 배경으로 올바르게 스타일이 지정된 navbar가 있지만 햄버거 메뉴로 전환하면 후속 메뉴 항목에 아무런 배경없이 whoteoever가 표시됩니다 읽기가 어렵다. (이유는 "남자 규칙"투명한 배경이 이미지에서는이 마우스 커서를 올려 확인한되고 있다는 것입니다.)

은 내가 위해 가지고이 모두 같은 $transparent-black 배경을 줄 수있는 방법을 찾기 위해 사랑 메인 네비게이션 (SASS를 사용하고 있습니다).

다음은 네비게이션 바 내 HTML/ERB의 :

<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 */ 
} 

이 사람이 나에게이 일을 알아내는 데 도움이 수는? 내가 this과 this 같은 게시물을 보았습니다.하지만 여전히 작동시키지 못합니다. 보너스 포인트는 xs 메뉴에서 그 어색한 백선을 제거하는 데 도움을 줄 수 있다면 요점입니다.

Answer 1

최근 프로젝트에서 사용한 해결책입니다. 여기

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

키 탐색이 표시 될 때 부트 스트랩 JS 통해인가 .in이다 (물론, 축소).