Bootstrap 4 : changer la couleur du Toggler Hamburger

Question

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

<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>

Est-il possible de modifier la couleur du bouton de basculement du hamburger ?

Answer 1

Le site navbar-toggler-icon (hamburger) dans Bootstrap 4 utilise un SVG background-image . Il existe 2 "versions" de l'image de l'icône de basculement. Une pour une barre de navigation claire, et une pour une barre de navigation foncée...

• Utilisez navbar-dark pour un interrupteur à bascule blanc/clair sur des fonds plus sombres
• Utilisez navbar-light pour un basculeur sombre/gris sur des fonds 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 voulez changer la couleur de l'image du basculeur en quelque chose d'autre, vous pouvez personnaliser l'icône. Par exemple, ici, j'ai défini la valeur RVB sur rose (255,102,203). Remarquez que l'icône stroke='rgba(255,102,203, 0.5)' 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 consiste à utiliser une icône d'une autre bibliothèque, par exemple Font Awesome, etc.

---

Mise à jour de Bootstrap 4.0.0 :

A partir de Bootstrap 4 Beta, navbar-inverse est maintenant navbar-dark à utiliser sur les barres de navigation dont les couleurs de fond sont plus sombres pour produire des couleurs de lien et de bascule plus claires.

---

Comment changer les couleurs de la barre de navigation de Bootstrap 4

Answer 2

Utilisez un icône "font-awesome 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 les anciennes versions de font-awesome :

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

Answer 3

Vous pouvez créer le bouton de basculement avec css seulement d'une manière très facile, il n'y a aucun besoin d'utiliser des polices dans 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 ligne horizontale Style :

.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>

Answer 4

EDIT : c'est ma faute ! Avec ma réponse, l'icône ne se comporte pas comme une bascule. En fait, elle s'affiche même si elle n'est pas fermée... Je cherche encore...

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 consiste à remplacer l'élément navbar-toggler avec une classe de boutons classiques btn et ensuite, comme répondu précédemment, utiliser une police d'icônes.

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

Comme indiqué dans ce publier sur github Dans le cadre de l'initiative de la Commission européenne, bootstrap utilise des "astuces css" pour que les utilisateurs n'aient pas à se fier aux polices de caractères.

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

A la vôtre.

Answer 5

Si vous travaillez avec la version sass de bootstrap en __variables.scss vous pouvez trouver $navbar-inverse-toggler-bg ou $navbar-light-toggler-bg_ où vous pouvez modifier la couleur et le style de votre bouton à bascule.

En html, vous devez utiliser navbar-inverse ou navbar-light en fonction de la version que vous souhaitez utiliser.