更改 Bootstrap Vue 折叠导航栏图标的颜色

Question

我已经将 Bootstrap Vue 集成到我的项目中，但很难对其进行自定义。 具体来说，我说的是 Navbar component.

我已阅读文档并看到我可以对导航栏应用一个变体，该变体将定义整个导航栏的颜色。

问题是，我没有为导航栏提供变体（也不想），当它折叠时，折叠的菜单图标（汉堡菜单图标）是黑色的，并且由于背景原因不可见我网站的颜色。

我检查了网站的 DOM 并使用了以下 CSS 规则和选择器：

• .navbar-toggle

• .navbar-toggler

• .navbar-toggler-icon

我尝试对他们每个人应用规则：

color: white !important;

但这没有结果。

我在网上和 SO 中都看过，但没有找到任何解决这种情况的方法。

导航栏打开：

导航栏折叠：

显然，我可以更改我网站的背景颜色，但我不想这样做，因为我不想因为一个小问题而改变网站的外观和感觉（我想成为能够知道如何克服这个问题）。

Link to code

Answer 1

查看您的代码 - .navbar-toggle 和 .navbar-toggler 只是普通的 div，因此 color 属性只会影响文本颜色。

如果您尝试更改图标颜色 - 它是一个内联背景 svg。你只能用你自己的文件覆盖它。

Answer 2

我设法通过使用以下选择器解决了这个问题：

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

@Ivan Klochkov 为我指出了正确的方向，但我不得不在正确的选择器上搞砸了。