html - Twitter Bootstrap 响应式导航(btn-navbar、icon-bar)颜色变化

标签 html css sass less twitter-bootstrap-rails

我正在使用 Bootstrap 并专注于移动导航。悬停时,图标(三条水平线)具有灰色背景色;然而,背景颜色只在图标的一半处出现(见图)。我不介意这种背景颜色,但我想在顶部有圆 Angular 边缘的完整图标上方,因为它们在底部。我怎样才能做到这一点?任何想法/建议表示赞赏。

enter image description here

最佳答案

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

<span class="icon-bar"></span>

使用 CSS 设置你想要的颜色

.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}

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

.navbar-toggle {
    background-color: #666;
}

如果你想改变焦点的颜色,那么只需在 Bootstrap 中调整 :focus 标签:

.navbar-toggle:focus {

// set the new color here for focus

}

.navbar-toggle:focus .icon-bar {

// here for the 3 white Stripes

}

关于html - Twitter Bootstrap 响应式导航(btn-navbar、icon-bar)颜色变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25065974/

相关文章:

sass - 在 Sass mixin 中跳过可选参数

css - SCSS 中的交替变量

html - 使元素的高度适应内部的内容

javascript - webgl earth javascript 中的 fancybox html

css - Ubermenu移动分辨率

magento - 将 magento 购物车 block 加载到下拉面板

html - 使 PDF 帮助文件自动打开

javascript - 使用 Content-Security-Policy 和 JavaScript 避免 `script-src ' unsafe-inline'`

html - 填充集时,相对父级内部的绝对定位会溢出 div

css - 找不到 laravel mix sass 图像/哈希