Change icon-bar color in bootstrap

Question

I want to change   color   HTML    lt button type  button  class  navbar-toggle  data-toggle  collapse  data-target   menu  gt     lt span class  sr-only  gt Toggle menu navigation lt  span gt     lt span class  icon-bar  gt  lt  span gt     lt span class  icon-bar  gt  lt  span gt     lt span class  icon-bar  gt  lt  span gt   lt  button gt    I tried various things  look bellow  but nothing works   CSS    icon-bar     color  black    border-color  black    background-color  black

User · Answer

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

User · Answer

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

User · Answer

Try over-riding CSS using  important  like this   icon-bar      background-color  FF0000  important

User · Answer

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   lt div class  navbar-header  gt     lt button type  button  class  navbar-toggle collapsed  data-toggle  collapse  data-target   defaultNavbar1  aria-expanded  false  gt  lt span class  sr-only  gt Toggle navigation lt  span gt      lt span class  icon-bar  gt  lt  span gt     lt span class  icon-bar  gt  lt  span gt     lt span class  icon-bar  gt  lt  span gt      lt  button gt     lt a class  navbar-brand  href      lt span class  icon-bar  gt  lt  span gt  lt img class  img-responsive brand  src  img brand png  gt     lt  a gt  lt  div gt    CSS       navbar-toggle   icon-bar       border 1px solid orange      BOOM

User · Answer

I am using Bootstrap  amp  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

User · Answer

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

User · Answer

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    lt span class  icon-bar  style  background-color  black  important   gt   lt  span gt   lt span class  icon-bar  style  background-color  black  important   gt   lt  span gt   lt span class  icon-bar  style  background-color  black  important   gt   lt  span gt

[css] Change icon-bar (?) color in bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to css-specificity