web-dev-qa-db-fra.com

Bootstrap 4 Change Hamburger Toggler Couleur

J'ai un site Web de démarrage où la Hamburger est ajoutée lorsque l'écran est inférieur à 992px Le code HamBurger est comme si

<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 changer la couleur du bouton HamBurger?

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4
62
Rehan

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. Une pour une barre de navigation légère et une pour une barre de navigation sombre ...

  • Utilisez navbar-dark pour un bascule clair/blanc sur des arrière-plans plus sombres
  • Utilisez navbar-light pour un bascule gris/foncé 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 modifier la couleur de l’image de bascule en autre chose, vous pouvez personnaliser l’icône. Par exemple, je règle ici la valeur RVB sur rose (255,102,203). Notez la valeur 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);
}

Demohttp://www.codeply.com/go/4FdZGlPMNV

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

Update Bootstrap 4.0.0: 

À compter de la version bêta de Bootstrap 4, navbar-inverse est maintenant navbar-dark à utiliser sur les barres de navigation avec des couleurs d’arrière-plan plus sombres afin de produire des couleurs de liens et de bascules plus claires.

Comment changer les couleurs de Bootstrap 4 Navbar

130
Zim

utilisez simplement une balise font-awesome dans "i" dans la plage d'icônes par défaut, puis modifiez la couleur de l'icône ajoutée avec CSS.

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon"></i>
</span>

.fa.fa-navicon {
  color:white;
}
22
Amirreza Mohammadi

Si vous travaillez avec la version sass de bootstrap dans_variables.scssvous pouvez trouver$navbar-inverse-toggler-bgou$navbar-light-toggler-bgoù vous pouvez modifier la couleur et le style de votre bouton bascule.

En html, vous devez utilisernavbar-inverseounavbar-lightselon la version que vous souhaitez utiliser.

1
nedeco

EDIT: mon mal! Avec ma réponse, l'icône ne se comportera pas comme une bascule En fait, elle sera affichée même si elle n'est pas réduite ... Toujours à la recherche ...

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 le navbar-toggler par un bouton classique de la classe btn, puis à utiliser une police de caractères, comme indiqué précédemment.

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

Comme indiqué dans ce post sur github , bootstrap utilise une "astuce css", de sorte que les utilisateurs ne doivent pas compter sur les polices.

Donc, n'utilisez pas la classe "navbar-toggler" sur votre bouton si vous souhaitez utiliser une police de caractères.

À votre santé.

1
stockersky

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>

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

ref: 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;
}

 enter image description here

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

0
Igor Parra

Vous pouvez créer le bouton toggler avec css 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>

0
Ghafor Sabury

insérez simplement la classe navbar-dark ou navbar-light dans l'élément nav:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
0
Thái An Nguyễn

Cochez la meilleure solution pour la navigation sur hamburger personnalisée.

@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

0
habibullah khan