Bootstrap 3.3.7：如何修改折叠导航栏按钮的hover/active状态颜色？

嗨，我来帮你搞定这个导航栏折叠按钮的样式问题！针对Bootstrap v3.3.7，你只需要调整几个LESS变量，再补一点点自定义样式就能实现需求：

需要修改的LESS变量 #

在Customize页面的「Navbar」分类下找到以下变量：

• @navbar-toggle-hover-background：把它改成你想要的蓝色（比如直接填色值#0066cc，或者用Bootstrap自带的主色变量@brand-primary——如果你的品牌色已经是蓝色的话），这个变量控制按钮hover/点击时的背景色。
• @navbar-toggle-icon-bar-color：设置为#fff（白色），这是icon-bar的默认颜色。

补充自定义样式 #

因为Bootstrap 3默认会在hover/active时把icon-bar的颜色加深10%，所以我们需要覆盖这个默认行为。在Customize页面的「Custom CSS」输入框里添加这段LESS代码：

.navbar-toggle:hover .icon-bar,
.navbar-toggle:active .icon-bar,
.navbar-toggle:focus .icon-bar {
  background-color: @navbar-toggle-icon-bar-color;
}

这段代码会强制让按钮在hover、点击、聚焦状态下，icon-bar保持和默认一样的白色，不会褪色。

做完这些设置后，点击页面底部的「Compile and Download」按钮，下载自定义后的Bootstrap文件替换原来的即可。

内容的提问来源于stack exchange，提问作者bdcoder