web-dev-qa-db-fra.com

Changer la couleur de la barre d'icônes (☰) dans le bootstrap

Je veux changer de couleur.

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>

J'ai essayé diverses choses (regardez ci-dessous) mais rien ne fonctionne.

CSS:

.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}
csstwitter-bootstrapcss-specificity
36
a1204773

La raison pour laquelle votre CSS ne fonctionne pas, c'est à cause de spécificité . Le sélecteur Bootstrap a une spécificité supérieure à la vôtre, votre style est donc complètement ignoré.

Bootstrap met cela en forme avec le sélecteur: .navbar-default .navbar-toggle .icon-bar. Ce sélecteur a une valeur de spécificité B de 3, alors que le vôtre n'a qu'une valeur de spécificité B de 1.

Par conséquent, pour remplacer ceci, utilisez simplement le même sélecteur dans votre CSS (en supposant que votre CSS soit inclus après Bootstrap's):

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}
93
James Donnelly

Essayez écrasant CSS en utilisant !important

comme ça

.icon-bar {
   background-color:#FF0000 !important;
}
7
Prasanth K C

Une seule ligne de codage suffit… essayez ceci. et vous pouvez même ajuster l’épaisseur de la barre d’icônes en ajoutant des 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...

2
Midun

Mec, je sais tout à fait ce que tu ressens, mais n'oublie pas le style en ligne . C'est presque le super saiyan de la spécificité CSS

Donc, ça devrait ressembler à quelque chose comme ça pour vous,

<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>
0
Wong Seng Wee

J'utilise Bootstrap & HTML5. Je voulais remplacer l'apparence du bouton à bascule.

.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;
}
0
Sylviamc

Je ne sais pas si vous cherchez toujours la réponse à ce problème, mais aujourd’hui, j’ai rencontré le même problème et je l’ai résolu .

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

ou

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

Vous avez cette place dans votre CSS

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

et ce que j'ai fait était d'ajouter ci-dessus

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

Parce que mon code html est

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

et si vous associez un fichier less/css

cherchez dans cette section et placez ici la couleur que vous voulez changer, sinon le fichier css sera auto-corrigé dans l'état où il se trouvait auparavant

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

si votre code html est comme le mien et n’est pas navbar-default, ajoutez-le comme vous l’avez fait avec 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;

bonne chance

0
jesusratti