Question

我想改变☰颜色。

HTML：

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
  <span class="sr-only">Toggle menu navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

我尝试了各种各样的东西（看下面），但没有任何作用。

CSS：

.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}

Answer 1

CSS无效的原因是specificity。 Bootstrap选择器具有比您更高的特异性，因此您的风格完全被忽略。

Bootstrap使用选择器设置此样式：.navbar-default .navbar-toggle .icon-bar。此选择器的 B 特异性值为3，而您的 B 特异性值为1。

因此，要覆盖它，只需在CSS中使用相同的选择器（假设您的CSS在 Bootstrap之后包含）：

.navbar-default .navbar-toggle .icon-bar { background-color: black; }

Answer 2

使用!important

尝试覆盖CSS 像这样

.icon-bar {
   background-color:#FF0000 !important;
}

Answer 3

只需一行编码即可。只需尝试一下即可。你可以通过添加像素来调整图标条的厚度。

<强> HTML

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><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" href="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png">
  </a></div>

<强> CSS

    .navbar-toggle, .icon-bar {
    border:1px solid orange;
}

... BOOM

Answer 4

我不知道你是否还在寻找这个问题的答案，但今天我遇到了同样的问题并解决了它。您需要在HTML代码中指定

**<Div class = "navbar"**>
         div class = "container">
               <Div class = "navbar-header">

或

**<Div class = "navbar navbar-default">**
        div class = "container">
               <Div class = "navbar-header">

你的CSS中有那个地方

.navbar-default-toggle .navbar .icon-bar {
  background-color: # 0000ff;
}

我做的是上面添加

.navbar .navbar-toggle .icon-bar {
  background-color: # ff0000;
}

因为我的HTML代码是

**<Div class = "navbar">**
         div class = "container">
               <Div class = "navbar-header">

如果您关联文件less / css

搜索此部分并在此处放置您要更改的颜色，否则它会自动将css文件更正为之前的状态

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-default-toggle-icon-bar-bg: # 888;**
@ Navbar-default-toggle-border-color: #ddd;

如果您的html代码与我的类似，并且不是navbar-default，请像使用css一样添加它。

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-toggle-icon-bar-bg : #888;**
@ Navbar-default-toggle-icon-bar-bg: # 888;
@ Navbar-default-toggle-border-color: #ddd;

祝你好运

Answer 5

我正在使用Bootstrap＆amp; HTML5。我想覆盖切换按钮的外观。

.navbar-toggle{
    background-color: #5DADB0;
    color: #F3DBAA;
    border:none;        
}

.navbar-toggle.but-menu:link {
    color: #F00;
    background-color: #CF995F;
}

.navbar-toggle.but-menu:visited {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:hover {
    color: #FFF0C9;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:active {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:focus {
    color: #FFF;
    background-color: #CF995F;
}

Answer 6

老兄，我完全了解你的感受，但不要忘记内联样式。它几乎是CSS特异性的超级saiyan

所以它看起来应该是这样的，

<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>

Answer 7

在bootstrap 4.3.1中，我可以通过CSS代码将切换图标的背景颜色更改为白色。

.navbar-toggler{
  background-color:white;
  }

在我看来，这样更改的图标在浅色和深色背景上看起来都很好。

在引导程序中更改图标栏（☰）颜色

7 个答案: