Twitter Bootstrap响应式导航(btn-navbar,icon-bar)颜色更改

And*_*rie -1 html css sass less twitter-bootstrap-rails

我正在使用Bootstrap并专注于移动导航.当盘旋时,图标(三条水平线)具有灰色背景颜色; 但是,背景颜色仅在图标的一半处(见图).我不介意这种背景颜色,但我想要在顶部有圆形边缘的完整图标,因为它们位于底部.我怎样才能做到这一点?任何想法/建议表示赞赏.

在此输入图像描述

der*_*ida 6

您需要更改为图标栏颜色,显示在:

<span class="icon-bar"></span>
Run Code Online (Sandbox Code Playgroud)

使用CSS设置您想要的颜色

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}
Run Code Online (Sandbox Code Playgroud)

您还可以设置按钮的背景颜色.

.navbar-toggle {
    background-color: #666;
}
Run Code Online (Sandbox Code Playgroud)

如果要更改焦点上的颜色,只需在Bootstrap中调整:focus标记:

.navbar-toggle:focus {

// set the new color here for focus

}
Run Code Online (Sandbox Code Playgroud)

.navbar-toggle:focus .icon-bar {

// here for the 3 white Stripes

}
Run Code Online (Sandbox Code Playgroud)