a1204773 a1204773 - 1 year ago 197
CSS Question

Change icon-bar (☰) color in bootstrap

I want to change ☰ color.


<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="sr-only">Toggle menu navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

I tried various things (look bellow) but nothing works.


.icon-bar {
color: black;
border-color: black;
background-color: black;


The reason your CSS isn't working is because of specificity. The Bootstrap selector has a higher specificity than yours, so your style is completely ignored.

Bootstrap styles this with the selector: .navbar-default .navbar-toggle .icon-bar. This selector has a specificity of 30 (each .class counts as 10), whereas yours only has a specificity of 10.

Therefore, to override this, simply use the same selector in your CSS (assuming your CSS is included after Bootstrap's):

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;