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

Boschbok

which version of Bootstrap are you using? #12379653 – Solve

@Solve the latest one – Boschbok

Override the color using !important – Mambo

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

Malita

@JaydenLawson I've rolled back your edit. The definition of specificity has been slightly reworked lately to remove the decimal, concatenated values. A CSS class has a B specificity value of 1. When A, B and c values are concatenated, it would appear to have a specificity of 010, yes, but what happens when there are more than 10 classes (or 16, if you want to use hexadecimal here)? The specificity wouldn't suddenly become 100, it would then be 0100, but as a concatenated value that's hard to read, and should actually be represented as 0,10,0. – Malita

No worries @James. At least the spelling is correct :) – Arena

@JamesDonnelly explanation is very useful, really you teach me the reason why that was not working, thanks a lot Sir :) – Sheepdog

Answer 2

Try over-riding CSS using !important

like this

.icon-bar {
   background-color:#FF0000 !important;
}

Permenter

Using !important is generally a bad idea, and for this it's completely unnecessary. – Malita

You say that but without the important it doesn't work? – Eschalot

@AlanSimes the answer I've provided on this question doesn't use !important and was both accepted and upvoted more than 15 times. – Malita

Add it to your framework and overrides .css file and it will work without !important. Bottom line it needs to be declared after the initial declaration for it to take affect. – Statuette

This will work - though shouldn't be the "go to". Plus if it is used they can always override it in the future by using a more specific !important rule or better yet - do it inline!! :D (The last bit is sarcasm) – Arterialize

Answer 3

Just one line of coding is enough.. just try this out. and you can adjust even thicknes of icon-bar with this by adding pixels.

HTML

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span>

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

  </button>
  <a class="navbar-brand" href="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png">
  </a></div>

CSS

    .navbar-toggle, .icon-bar {
    border:1px solid orange;
}

BOOM...

Mairemaise

Answer 4

Dude I know totally how you feel, but don't forget about inline styling. It is almost the super saiyan of the CSS specificity

So it should look something like this for you,

<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>

Torque

Answer 5

I do not know if your still looking for the answer to this problem but today I happened the same problem and solved it. You need to specify in the HTML code,

**<Div class = "navbar"**>
         div class = "container">
               <Div class = "navbar-header">

or

**<Div class = "navbar navbar-default">**
        div class = "container">
               <Div class = "navbar-header">

You got that place in your CSS

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

and what I did was add above

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

Because my html code is

**<Div class = "navbar">**
         div class = "container">
               <Div class = "navbar-header">

and if you associate a file less / css

search this section and also here placed the color you want to change, otherwise it will self-correct the css file to the state it was before

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-default-toggle-icon-bar-bg: # 888;**
@ Navbar-default-toggle-border-color: #ddd;

if your html code is like mine and is not navbar-default, add it as you did with the css.

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-toggle-icon-bar-bg : #888;**
@ Navbar-default-toggle-icon-bar-bg: # 888;
@ Navbar-default-toggle-border-color: #ddd;

good luck

Pasha

Answer 6

I am using Bootstrap & HTML5. I wanted to override the look of the toggle button.

.navbar-toggle{
    background-color: #5DADB0;
    color: #F3DBAA;
    border:none;        
}

.navbar-toggle.but-menu:link {
    color: #F00;
    background-color: #CF995F;
}

.navbar-toggle.but-menu:visited {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:hover {
    color: #FFF0C9;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:active {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:focus {
    color: #FFF;
    background-color: #CF995F;
}

Luxemburg

Answer 7

In bootstrap 4.3.1 I can change the background color of the toggler icon to white via the css code.

.navbar-toggler{
  background-color:white;
  }

And in my opinion the so changed icon looks fine as well on light as on dark background.

Siret