Bootstrap 4 Changer la couleur du hamburger Toggler

125

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?

css twitter-bootstrap bootstrap-4 Rehan
la source

2

Le code ne fonctionne pas tel quel dans bootply

Jordan.JD

Ce n'est pas vraiment une réponse, mais vous pouvez jouer avec l'icône navbar-toggler-icon sur advertentiekracht.nl/togglerIcon.html Là, bootstraps toggler-icon est utilisé comme élément de style externe au lieu de faire référence à la feuille de style bootstrap. Il est également expliqué comment gérer cela.

ben Thijssen le

245

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

Zim
la source

2

Dans Bootstrap 4 beta 1, il n'y a pas de .navbar-inverseclasse. vous pouvez choisir entre deux classes: .navbar-lightou .navbar-dark.

Qrzysio

55

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>

Amirreza Mohammadi
la source

3

Pour fontawesome 5, utilisez des barres. fontawesome.com/icons/bars?style=solid

Murtaza Bhurgri

C'est la meilleure idée.

Shiva Manhar du

7

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>

Développer l'extrait

Ghafor Sabury
la source

5

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>

Thái An Nguyễn
la source

4

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

Prateek Gupta
la source

3

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");
}

Développer l'extrait

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

Eyoab
la source

2

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

Stockersky
la source

Cela ne "fonctionne" que si vous utilisez Font Awesome qui ne fait pas partie de Bootstrap

Zim

Je suppose que vous devez supprimer le commentaire sur la réponse donnée par Amirreza Mohammadi de la liste. Merci.

NoChance

2

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.

Henri
la source

1

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.

nedeco
la source

ne fonctionne pas dans bootstrap 4 en ce qui concerne navbar-light

botbot

1

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

Igor Parra
la source

1

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

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

 

Md. Rana
la source

0

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>

Développer l'extrait

image de démonstration

habibullah khan
la source

Bootstrap 4 Changer la couleur du hamburger Toggler

Réponses: