Bootstrap 4 Changer la couleur du hamburger Toggler

J'ai un site Web bootstrap où le bascule hamburger est ajouté lorsque la taille de l'écran est inférieure à 992px. Le code est comme ceci:

<button class="navbar-toggler navbar-toggler-right" 
        type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" 
        aria-expanded="false" 
        aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button>

Existe-t-il une possibilité de changer la couleur du bouton de basculement du hamburger?

Le navbar-toggler-icon(hamburger) dans Bootstrap 4 utilise un SVG background-image. Il existe 2 "versions" de l'image de l'icône de bascule. Un pour une barre de navigation claire et un pour une barre de navigation sombre ...

• Utiliser navbar-darkpour une bascule clair / blanc sur des arrière-plans plus sombres
• Utiliser navbar-lightpour une bascule foncée / grise sur des arrière-plans plus clairs

// 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-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

Par conséquent, si vous souhaitez changer la couleur de l'image de bascule en autre chose, vous pouvez personnaliser l'icône. Par exemple, ici, je règle la valeur RVB sur rose (255,102,203). Notez 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");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

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

OFC, une autre option pour simplement utiliser une icône d'une autre bibliothèque à savoir: Font Awesome, etc.

Mettez à jour Bootstrap 4.0.0:

À partir de Bootstrap 4 Beta, navbar-inverseest maintenant navbar-darkà utiliser sur les barres de navigation avec des couleurs d'arrière-plan plus sombres pour produire des couleurs de lien et de bascule plus claires.

Comment changer les couleurs de Bootstrap 4 Navbar

Utilisez une icône de police géniale comme icône par défaut de votre barre de navigation.

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

Ou essayez ceci sur d'anciennes versions de polices géniales:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

Vous pouvez créer le bouton bascule avec css uniquement de manière très simple, il n'est pas nécessaire d'utiliser des polices en SVG ou ... foramt.

Votre bouton:

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

Votre style de bouton:

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

Votre style de ligne horizontale:

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

Démo

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}

<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>

insérez simplement la classe navbar-darkou navbar-lightdans l'élément nav:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Le moyen le plus simple est de remplacer ce code de démarrage par défaut:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

par ça :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

Et n'oubliez pas d'ajouter ce code également à votre fichier:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

J'espère que ça aide!!

Si vous avez téléchargé bootstrap, accédez à bootstrap-4.4.1-dist / css / bootstrap.min

je. trouver le .navbar-light .navbar-toggler-iconou le .navbar-dark .navbar-toggler-iconsélecteur

ii. sélectionnez l'attribut background-image et sa valeur. L'extrait ressemble à ceci:

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

iii. copiez l'extrait et collez-le dans votre CSS personnalisé

iv. changez la stroke=’rgba(0,0,0,0.5)’valeur en votre valeur rgba préférée

EDIT: mon mauvais! Avec ma réponse, l'icône ne se comportera pas comme une bascule En fait, elle sera affichée même lorsqu'elle n'est pas réduite ... Recherche toujours ...

Cela fonctionnerait:

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

L'astuce proposée par ma réponse est de remplacer le navbar-togglerpar une classe de bouton classique btn, puis, comme répondu précédemment, d'utiliser une police d'icônes.

Notez que si vous gardez <button class="navbar-toggler">, le bouton aura une forme "étrange".

Comme indiqué dans cet article sur github , le bootstrap utilise une "supercherie css", afin que les utilisateurs n'aient pas à se fier aux polices.

Donc, n'utilisez pas la "navbar-toggler"classe sur votre bouton si vous souhaitez utiliser une police d'icônes.

À votre santé.

Je viens de développer une solution considérablement plus simple. (Oui, je sais que c'est une vieille question, mais quelqu'un qui recherche ce même problème peut trouver cela utile.)

J'utilisais un SVG appelé hamburger.svg. Je l'ai regardé avec un éditeur de texte et je n'ai rien trouvé qui définissait une couleur pour les trois lignes - je suppose qu'il est par défaut noir parce que c'est certainement le comportement que j'obtiens - alors j'ai simplement ajouté un paramètre "trait" à la définition du SVG. Cela n'a pas très bien fonctionné - les bordures des trois lignes étaient ma couleur choisie (blanc) mais le reste de la ligne était toujours noir, j'ai donc ajouté un paramètre de "remplissage". Et cela a fait l'affaire!

Voici le code du hamburger.svg original dans son intégralité:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

Et voici le code du nouveau SVG après l'avoir édité et sauvegardé sous le nom hamburger_white.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

Comme vous pouvez le voir si vous faites défiler vers la droite, tout ce que j'ai fait a été d'ajouter:

stroke="white" fill="white"

jusqu'au bout du chemin. L'autre chose que j'avais à faire était de changer le nom de fichier du hamburger dans le HTML. Pas de problème avec le CSS et pas besoin de rechercher une autre icône.

Facile-peasey! Vous pouvez l'imiter pour faire de votre hamburger la couleur que vous aimez.

Si vous travaillez avec la version sass de bootstrap, _variables.scssvous pouvez trouver $navbar-inverse-toggler-bgou $navbar-light-toggler-bgmodifier la couleur et le style de votre bouton à bascule.

En html, vous devez utiliser navbar-inverseou navbar-lightselon la version que vous souhaitez utiliser.

Comme alternative, vous pouvez toujours essayer une solution de contournement plus simple, en utilisant une autre icône, par exemple:

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

réf: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

réf: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

Vous obtenez ainsi un contrôle total sur leur couleur et leur taille:

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

( le style du bouton appliqué est juste pour un test rapide ):

Icône de la barre de navigation d'amorçage par défaut

<span class="navbar-toggler-icon"></span>

Ajouter l'icône Font Awesome et supprimer class="navbar-toggler-icon"

<span> <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i> </span>

Vérifiez la meilleure solution pour un hamburger nav personnalisé.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.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, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>

image de démonstration