将 .icon-bar 的颜色更改为白色？答案

【问题标题】：Change the color of .icon-bar to white?将 .icon-bar 的颜色更改为白色？
【发布时间】：2020-08-03 19:18:11
【问题描述】：

我正在尝试将折叠菜单图标栏的颜色更改为白色（移动设备上的三个堆叠线）。我就是想不通。

这是我的html：

<div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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-left newstyle" href="http://hopewellmc.org"><img height="50" alt="Brand" src="http://hopewellmc.org/favicons/Badge.png"></a>
    </div>

我已尝试更改 CSS 文件，但似乎找不到合适的样式将这些条更改为白色。

【问题讨论】：

标签： css

【解决方案1】：

检查这个小提琴

https://jsfiddle.net/pu6gqo48/

我猜你使用的是 bootstrap 3，所以你需要为 icon-bar 类添加 2 个选择器。

.navbar-header .navbar-toggle.collapsed .icon-bar {
  background-color: gray;
}

.navbar-header .navbar-toggle .icon-bar {
  background-color: white;
}

该示例使用蓝色和红色。

【讨论】：

是的，我正在使用 Boostrap 3。不幸的是，这不起作用。我想知道 CSS 中是否有一些东西覆盖了颜色？我的 html 以“navbar-header”而不是“navbar-default”开头，这有什么区别吗？感谢您的帮助，并对愚蠢的问题感到抱歉，因为我是新手。
2 个解决方案。在您的特定样式中使用!important（虽然不推荐）或检查加载样式的顺序。
navbar-header 上方没有navbar-default 作为父元素？
用新的选择器更新了我的答案。抱歉，我以为你使用了常用的导航栏元素和样式，所以我使用了navbar-default。它也适用于navbar-header。
谢谢！那行得通。我正在使用所见即所得的网站构建器，并且 OP 中的 html 是生成的。我不确定为什么不使用“navbar-default”。

【解决方案2】：

我添加到类 navbar-dark 并且我的汉堡包变成了白线

<button class="navbar-toggler navbar-toggler-right navbar-dark lined" type="button" data- 
        toggle="collapse" data-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" aria-expanded="false" 
        aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>      
 </button>

【讨论】：