Change icon-bar (☰) color in bootstrap

Question

I want to change ☰ color.

HTML:

<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> </button> 

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

CSS:

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

Answer 1

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 B specificity value of 3, whereas yours only has a B specificity value of 1.

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; }