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

which version of Bootstrap are you using? http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css — Gotschi, Dec 12 '13 at 10:14

James Donnelly · Accepted Answer · 2016-05-25T09:04:09.220

101

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

edited May 25 '16 at 09:04

answered Dec 12 '13 at 10:17

James Donnelly

117,312
30
193
198

2

@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. – James Donnelly May 25 '16 at 09:03
2

No worries @James. At least the spelling is correct :) – Jayden Lawson May 25 '16 at 11:53
1

@JamesDonnelly explanation is very useful, really you teach me the reason why that was not working, thanks a lot Sir :) – Mohammed Sufian Aug 13 '16 at 16:26

score 8 · Answer 2 · answered Dec 12 '13 at 10:16

8

Try over-riding CSS using !important

like this

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

answered Dec 12 '13 at 10:16

Prasanth K C

6,307
5
33
58

11

Using `!important` is generally a bad idea, and for this it's completely unnecessary. – James Donnelly Dec 12 '13 at 10:20
1

You say that but without the important it doesn't work? – Alan Simes Nov 18 '14 at 12:13
3

@AlanSimes the answer I've provided on this question doesn't use `!important` and was both accepted and upvoted more than 15 times. – James Donnelly Feb 04 '15 at 11:56
1

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. – heading_to_tahiti Aug 04 '15 at 04:44
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) – Radmation Nov 22 '16 at 20:43

score 2 · Answer 3 · answered Aug 27 '16 at 01:58

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...

score 1 · Answer 4 · answered Jun 27 '17 at 15:30

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>

score 0 · Answer 5 · answered May 19 '15 at 03:29

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

score 0 · Answer 6 · answered Apr 29 '17 at 15:20

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

feli_x · Answer 7 · 2020-06-23T06:16:55.947

0

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.

edited Jun 23 '20 at 06:16

answered Jun 22 '20 at 21:56

feli_x

119
7

Change icon-bar (☰) color in bootstrap

7 Answers7

Linked