Question

我有一个导航栏，在非xs屏幕上使用半透明背景正确设置样式，但是当它切换到汉堡菜单时，后续菜单项没有任何背景，这使得它们难以阅读。（在图像中，“人规则”具有透明背景的原因是它正在盘旋。）

我很想找到一种方法来为主导航栏提供所有相同的$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);
}

这里的关键是.in，当显示导航时（当然，折叠了），它通过Bootstrap JS应用。

Bootstrap中汉堡菜单项的背景

1 个答案: