Changer la couleur de la barre d'icônes ( ☰ ) dans bootstrap
Je veux changer ☰ 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;
}
6 réponses
La raison pour laquelle votre CSS ne fonctionne pas est à cause de spécificité . Le sélecteur Bootstrap a une spécificité plus élevée que la vôtre, donc votre style est complètement ignoré.
Bootstrap styles ceci 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 a seulement une valeur de spécificitéB de 1.
Par conséquent, pour remplacer cela, utilisez simplement le même sélecteur dans votre CSS (en supposant que votre CSS est inclus après Bootstrap):
.navbar-default .navbar-toggle .icon-bar {
background-color: black;
}
Try plus de l'équitation, du CSS utiliser !important
Comme ceci
.icon-bar {
background-color:#FF0000 !important;
}
Une seule ligne de codage suffit.. juste un essai. et vous pouvez ajuster même thicknes de barre d'icône avec cela 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;
}
Boum...
Je ne sais pas si vous cherchez toujours la réponse à ce problème, mais aujourd'hui, je suis arrivé le même problème et l'ai résolu. Vous devez spécifier dans le code HTML,
**<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 cet endroit 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 Moins / css
Recherche dans cette section et aussi ici placé la couleur que vous voulez changer, sinon il va auto-corriger le fichier css à l'état qu'il était avant
// 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-par défaut, l'ajouter comme vous l'avez fait avec le 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
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;
}
Mec je sais totalement ce que vous ressentez, mais n'oubliez pas Style inline . C'est presque le Super saiyan de la spécificité CSS
Il devrait donc ressembler à ceci 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>