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

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

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      lt Div class    navbar    gt           div class    container  gt                  lt Div class    navbar-header  gt    or     lt Div class    navbar navbar-default  gt            div class    container  gt                  lt Div class    navbar-header  gt    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     lt Div class    navbar  gt             div class    container  gt                  lt Div class    navbar-header  gt    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

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

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

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

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

Examples related to css

Examples related to twitter-bootstrap

Examples related to css-specificity