Я использую bootstrap, чтобы иметь открытую навигацию, когда страница открывается, но как только пользователь прокручивается вниз, а навигация сворачивается, он меняется на белый фон.Сменить бутстрап Гамбургер Цвет только при смене
Я использую это, чтобы сделать изменение цвета фона:
.top-nav-collapse {
background-color: #FFFFFF !important;
}
И я знаю, что от экстенсивного Googling, что это изменяет цвет значка гамбургера в целом:
.navbar-default .navbar-toggle .icon-bar {
background-color: black;
}
Однако, я могу Кажется, что цвет меняется только при крахе. Вот мой навигационный штрих-код:
<nav class="navbar navbar-fixed-top z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand waves-effect waves-light pull-left" href="/"><%= image_tag 'Flame.png', style: "height: 100%"%></a>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li><a href="#" class="waves-effect waves-light">Workouts <span class="sr-only">(current)</span></a></li>
<li><%= link_to 'Blog', posts_path, class:"waves-effect waves-light" %></li>
<li><a href="#" class="waves-effect waves-light">Equipment</a></li>
<li><a href="#" class="waves-effect waves-light">About Us</a></li>
</ul>
</div> <!-- navbar collapse -->
</div> <!-- container-fluid -->
</nav>
Может ли кто-нибудь пролить свет на это?
Трудно полностью понять, что вы просите, но я думаю, вы просто ищете этот '.navbar-toggle.collapsed .icon-bar {...}'? – Quantastical
Красивые. Я должен был сделать это «важно», чтобы он регистрировался, но это сработало! – Liz