Bootstrap 4 Cambia colore dell'hamburger Toggler

125

Ho un sito Web di bootstrap in cui viene aggiunto il toggler dell'hamburger quando la dimensione dello schermo è inferiore a 992 px. Il codice è così:

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

C'è la possibilità di cambiare il colore del pulsante di commutazione dell'hamburger?

css  twitter-bootstrap  bootstrap-4 
— Rehan
fonte
2
Il codice non funziona come in bootply
— Jordan.JD
Non è proprio una risposta, ma puoi giocare con l'icona navbar-toggler su advertentiekracht.nl/togglerIcon.html L'icona toggler bootstraps è usata come elemento di stile esterno invece di riferirsi al foglio di stile bootstrap. Viene anche spiegato come gestirlo.
— Ben Thijssen

Risposte:

245

L ' navbar-toggler-icon(hamburger) in Bootstrap 4 utilizza un SVG background-image. Sono disponibili 2 "versioni" dell'immagine dell'icona di attivazione / disattivazione. Uno per una barra di navigazione chiara e uno per una barra di navigazione scura ...

  • Utilizzare navbar-darkper un commutatore chiaro / bianco su sfondi più scuri
  • Utilizzare navbar-lightper un alternatore scuro / grigio su sfondi più chiari
// 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;..");
}

Pertanto, se desideri modificare il colore dell'immagine del commutatore in qualcos'altro, puoi personalizzare l'icona. Ad esempio, qui ho impostato il valore RGB su rosa (255,102,203). Notare il stroke='rgba(255,102,203, 0.5)'valore nei dati 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);
}

Demo http://www.codeply.com/go/4FdZGlPMNV

OFC, un'altra opzione per utilizzare semplicemente un'icona da un'altra libreria, ad esempio: Font Awesome, ecc.

Aggiorna Bootstrap 4.0.0:

A partire da Bootstrap 4 Beta, navbar-inverseè ora navbar-darkda utilizzare su barre di navigazione con colori di sfondo più scuri per produrre collegamenti più chiari e colori di commutazione.

Come cambiare i colori della barra di navigazione di Bootstrap 4

— Zim
fonte
2
In Bootstrap 4 beta 1 non esiste una .navbar-inverseclasse. puoi scegliere tra due classi: .navbar-lighto .navbar-dark.
— Qrzysio
55

Usa un'icona fantastica per i caratteri come icona predefinita della tua barra di navigazione.

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

Oppure provalo su vecchie versioni fantastiche di font:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
— Amirreza Mohammadi
fonte
3
Per fontawesome 5 usa le barre. fontawesome.com/icons/bars?style=solid
— Murtaza Bhurgri
È un'idea molto migliore.
— Shiva Manhar,
7

Puoi creare il pulsante di attivazione / disattivazione con CSS solo in un modo molto semplice, non è necessario utilizzare alcun carattere in SVG o ... foramt.

Il tuo pulsante:

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

Il tuo stile pulsante:

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

}

Il tuo stile di linea orizzontale:

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

}

dimostrazione

.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>
Espandi lo snippet

— Ghafor Sabury
fonte
5

basta inserire la classe navbar-darko navbar-lightnell'elemento 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
fonte
4

Il modo più semplice è sostituire questo codice bootstrap predefinito:

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

da questo :

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

E non dimenticare di aggiungere questo codice anche al tuo file:

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

Spero che sia d'aiuto!!

— Prateek Gupta
fonte
3

Se hai scaricato bootstrap, vai a bootstrap-4.4.1-dist / css / bootstrap.min

io. trova il .navbar-light .navbar-toggler-icono il .navbar-dark .navbar-toggler-iconselettore

ii. seleziona l'attributo background-image e il suo valore. Lo snippet ha questo aspetto:

.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");
}
Espandi lo snippet

iii. copia lo snippet e incollalo nel tuo CSS personalizzato

iv. modificare il stroke=’rgba(0,0,0,0.5)’valore con il valore rgba preferito

— Eyoab
fonte
2

EDIT: il mio male! Con la mia risposta, l'icona non si comporterà come un commutatore In realtà, verrà mostrato anche quando non è compresso ... Sto ancora cercando ...

Questo funzionerebbe:

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

Il trucco proposto dalla mia risposta è sostituire la navbar-togglercon una classica classe di pulsanti btne quindi, come risposto in precedenza, utilizzare un carattere icona.

Nota che se tieni <button class="navbar-toggler">premuto, il pulsante avrà una forma "strana".

Come affermato in questo post su GitHub , bootstrap utilizza alcuni "trucchi CSS", quindi gli utenti non devono fare affidamento sui caratteri.

Quindi, non usare la "navbar-toggler"classe sul tuo pulsante se vuoi usare un carattere icona.

Saluti.

— stockersky
fonte
Questo "funziona" solo se usi Font Awesome che non fa parte di Bootstrap
— Zim
Immagino che sia necessario rimuovere il commento sulla risposta data da Amirreza Mohammadi nell'elenco. Grazie.
— NoChance
2

Ho appena sviluppato una soluzione notevolmente più semplice. (Sì, so che questa è una vecchia domanda, ma qualcuno che sta cercando lo stesso problema potrebbe trovarlo utile.)

Stavo usando un SVG chiamato hamburger.svg. L'ho guardato con un editor di testo e non sono riuscito a trovare nulla che stesse impostando un colore per le tre linee - immagino che sia nero per impostazione predefinita perché questo è certamente il comportamento che ottengo - quindi ho semplicemente aggiunto un parametro "tratto" a la definizione di SVG. Non ha funzionato MOLTO - i bordi delle tre linee erano il colore scelto (bianco) ma il resto della linea era ancora nero, quindi ho aggiunto anche un parametro "riempimento". E questo ha funzionato!

Ecco il codice per l'originale hamburger.svg nella sua interezza:

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

Ed ecco il codice per il nuovo SVG dopo averlo modificato e salvato come 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>

Come puoi vedere se scorri verso destra, tutto quello che ho fatto è stato aggiungere: 

stroke="white" fill="white"

fino alla fine del percorso. L'altra cosa che dovevo fare era cambiare il nome del file dell'hamburger nell'HTML. Nessun problema con il CSS e nessuna necessità di rintracciare un'altra icona.

Easy-peasey! Puoi imitarlo per rendere il tuo hamburger del colore che preferisci.

— Henry
fonte
1

Se lavori con la versione sass di bootstrap _variables.scsspuoi trovare $navbar-inverse-toggler-bgo$navbar-light-toggler-bg dove puoi cambiare il colore e lo stile del tuo pulsante di attivazione / disattivazione.

In html devi usare navbar-inverseoa navbar-lightseconda della versione che vuoi usare.

— NEDECO
fonte
non funziona in bootstrap 4 per quanto riguarda navbar-light
— botbot
1

In alternativa puoi sempre provare una soluzione più semplice, utilizzando un'altra icona, ad esempio: 

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

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

rif: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

In questo modo ottieni il controllo totale sul loro colore e dimensione:

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

inserisci qui la descrizione dell'immagine

( lo stile del pulsante applicato è solo per un rapido test ):

— Igor Parra
fonte
1

Icona predefinita della barra di navigazione bootstrap

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

Aggiungi icona Font Awesome e rimuovi class="navbar-toggler-icon"

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

— Md. Rana
fonte
0

Controlla la soluzione migliore per il navigatore hamburger personalizzato.

@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>
Espandi lo snippet

immagine demo

— habibullah khan
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.