如何修改Bootstrap移动端展开状态下的导航切换图标颜色

我之前也碰到过类似的主题样式覆盖问题，大概率是Foundry主题在菜单展开时给汉堡按钮的父元素或者自身加了一个状态类，导致图标被强制改成白色了。咱们可以通过自定义CSS来解决这个问题：

第一步：确认菜单展开时的状态类 #

先打开浏览器的开发者工具（按F12，然后切换到移动端模拟模式），点击汉堡菜单，观察你的这段DOM：

<div class="module widget-handle mobile-toggle right visible-sm visible-xs absolute-xs"> <i class="icon fa fa-bars"></i> </div>

看看.mobile-toggle这个div或者它的父级<nav>有没有新增的类名（比如active、menu-open这类），记下来这个类名。

第二步：添加自定义CSS覆盖样式 #

根据你找到的状态类，把下面的代码粘贴到主题的自定义CSS面板里（一般在WordPress后台「外观」->「自定义」->「额外CSS」，或者Foundry主题专属的自定义设置区域）：

/* 替换这里的.menu-open为你实际找到的状态类 */
.mobile-toggle.menu-open i.fa-bars {
  color: #333; /* 换成你需要的颜色，比如深灰色 */
}

如果主题的样式优先级太高，这段代码没生效，可以加上!important强制覆盖：

.mobile-toggle.menu-open i.fa-bars {
  color: #333 !important;
}

第三步：验证效果 #

保存CSS设置后，刷新移动端页面，点击汉堡菜单，看看图标是不是正常显示你设置的颜色了。

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