Comment changer de Bootstrap toggle navigation couleur?

De ce que je vois c'est le code pour l'interrupteur-bouton de navigation:

<button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

J'ai ajouté id="nav-com-bouton" et lui a donné ce CSS:

#nav-toggle-button {
color: gray;
}

mais rien n'a changé. J'ai essayé d'ajouter !important aussi, sans succès, et je ne sais pas quoi d'autre pour essayer. Quelqu'un sait?

EDIT: Voici un violon avec une solution proposée par Prashant123 (désolé, pas assez de réputation afin de voter pour votre réponse!): http://jsfiddle.net/LuKSB/1/ c'est mieux déjà, mais il serait parfait si les lignes horizontales à l'intérieur du bouton doit être visible (blanc). Je suppose que ce serait un changement de couleur, mais ça ne fonctionne pas.

  • Voulez-vous changer la couleur du texte? Ou la couleur d'arrière-plan? Parce que la couleur de la propriété s'applique à la couleur du texte, pas la couleur d'arrière-plan.
  • Avec la mise à jour j'ai la couleur d'arrière-plan couverts, maintenant, je pense que c'est à propos de la couleur du texte.
InformationsquelleAutor user3691280 | 2014-06-06
  1. 5

    Changements de Bootstrap 4

    La navbar-toggler-icon dans le Bootstrap 4 utilise une SVG background-image. Il existe 2 versions de l'activation /désactivation d'image de l'icône. Un pour un peu de barre de navigation, et un pour une sombre (l'inverse) barre de navigation...

    //this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
//this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

    Si vous voulez changer la couleur de cette image de quelque chose d'autre, vous pouvez personnaliser l'icône. Par exemple, ici, j'ai mis la valeur RVB de rose (255,102,203). Avis de la stroke='rgba(255,102,203, 0.5)' valeur dans les données SVG..

    .custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

    Démo http://www.codeply.com/go/4FdZGlPMNV

    InformationsquelleAutor Zim
  2. 3

    essayer cette DÉMO
    html

    <button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

    css

    #nav-toggle-button{
    background-color:red;
}
    • Merci, maintenant il a travaillé, j'ai tenté, sans succès, peut-être il y avait une faute de frappe. Il est proche de ce que je veux si j'ai besoin de l'lignes (icône?) dans le bouton blanc (voir mon édité question).
    • Nouveau Bootstrap 4 utilise svg facteur d'image pour l'activation / désactivation de l'icône. Pour faire ceci par exemple blanc au lieu de gris: .navbar-light .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.9)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
    InformationsquelleAutor Prashant
  3. 0

    Ajoutant à Prashant exemple, vous pouvez cibler la durée de couleurs en modifiant le CSS entrée:

    #nav-toggle-button span {
    background-color: black;
}
    InformationsquelleAutor timSully