Bootstrap 4 Ändern Sie die Farbe des Hamburger Toggler

Ich habe eine Bootstrap-Website, auf der der Hamburger-Togler hinzugefügt wird, wenn die Bildschirmgröße weniger als 992 Pixel beträgt. Der Code ist wie folgt:

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

Gibt es eine Möglichkeit, die Farbe des Hamburger-Umschaltknopfs zu ändern?

Der navbar-toggler-icon(Hamburger) in Bootstrap 4 verwendet eine SVG background-image. Es gibt 2 "Versionen" des Togler-Symbolbildes. Eine für eine helle Navigationsleiste und eine für eine dunkle Navigationsleiste ...

• Verwenden Sie navbar-darkfür einen hell / weißen Togler auf dunkleren Hintergründen
• Verwenden Sie navbar-lightfür einen dunkel / grauen Togler auf helleren Hintergründen

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

Wenn Sie die Farbe des Togler-Bilds in etwas anderes ändern möchten, können Sie das Symbol anpassen. Zum Beispiel setze ich hier den RGB-Wert auf pink (255,102,203). Beachten Sie den stroke='rgba(255,102,203, 0.5)'Wert in den SVG-Daten:

.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, eine weitere Option, um einfach ein Symbol aus einer anderen Bibliothek zu verwenden, z. B.: Font Awesome usw.

Update Bootstrap 4.0.0:

Ab Bootstrap 4 Beta kann navbar-inversees jetzt navbar-darkauf Navigationsleisten mit dunkleren Hintergrundfarben verwendet werden, um hellere Link- und Togler-Farben zu erzeugen.

So ändern Sie die Farben der Bootstrap 4-Navigationsleiste

Verwenden Sie ein Schriftart-Symbol als Standardsymbol für Ihre Navigationsleiste.

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

Oder probieren Sie dies bei alten Versionen aus:

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

Sie können die Togler-Schaltfläche mit CSS nur auf sehr einfache Weise erstellen. Es ist nicht erforderlich, Schriftarten in SVG oder ... foramt zu verwenden.

Dein Button:

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

Ihr Tastenstil:

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

}}

Ihre horizontale Linie Stil:

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

}}

Demo

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

Fügen Sie einfach die Klasse navbar-darkoder navbar-lightdas nav-Element ein:

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

Am einfachsten ist es, diesen Standard-Bootstrap-Code zu ersetzen:

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

dadurch :

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

Und vergessen Sie nicht, diesen Code auch zu Ihrer Datei hinzuzufügen:

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

Ich hoffe es hilft!!

Wenn Sie bootstrap heruntergeladen haben, gehen Sie zu bootstrap-4.4.1-dist / css / bootstrap.min

ich. finde den .navbar-light .navbar-toggler-iconoder den .navbar-dark .navbar-toggler-iconSelektor

ii. Wählen Sie das Hintergrundbildattribut und seinen Wert aus. Das Snippet sieht folgendermaßen aus:

.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. Kopieren Sie das Snippet und fügen Sie es in Ihr benutzerdefiniertes CSS ein

iv. Ändern Sie den stroke=’rgba(0,0,0,0.5)’Wert in Ihren bevorzugten rgba-Wert

EDIT: mein schlechtes! Mit meiner Antwort verhält sich das Symbol nicht wie ein Toggler. Eigentlich wird es angezeigt, auch wenn es nicht zusammengeklappt ist ... Immer noch auf der Suche ...

Das würde funktionieren:

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

Der von meiner Antwort vorgeschlagene Trick besteht darin, die navbar-togglerdurch eine klassische Schaltflächenklasse zu ersetzen btnund dann, wie zuvor beantwortet, eine Symbolschriftart zu verwenden.

Beachten Sie, dass <button class="navbar-toggler">die Schaltfläche eine "seltsame" Form hat, wenn Sie sie beibehalten .

Wie in diesem Beitrag auf Github angegeben , verwendet Bootstrap einige "CSS-Tricks", sodass Benutzer sich nicht auf Schriftarten verlassen müssen.

Verwenden Sie die "navbar-toggler"Klasse also einfach nicht auf Ihrer Schaltfläche, wenn Sie eine Symbolschrift verwenden möchten.

Prost.

Ich habe gerade eine wesentlich einfachere Lösung entwickelt. (Ja, ich weiß, dass dies eine alte Frage ist, aber jemand, der das gleiche Problem untersucht, kann dies nützlich finden.)

Ich habe eine SVG namens hamburger.svg verwendet. Ich habe es mit einem Texteditor betrachtet und konnte nichts finden, das eine Farbe für die drei Zeilen festlegte - ich vermute, es ist standardmäßig schwarz, da dies sicherlich das Verhalten ist, das ich bekomme - also habe ich einfach einen "Strich" -Parameter hinzugefügt die Definition der SVG. Das hat nicht ganz funktioniert - die Ränder der drei Linien waren meine gewählte Farbe (weiß), aber der Rest der Linie war immer noch schwarz, also habe ich auch einen "Füll" -Parameter hinzugefügt. Und das hat den Trick gemacht!

Hier ist der Code für die ursprüngliche hamburger.svg in ihrer Gesamtheit:

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

Und hier ist der Code für die neue SVG, nachdem ich sie bearbeitet und als hamburger_white.svg gespeichert habe:

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

Wie Sie sehen können, wenn Sie ganz nach rechts scrollen, habe ich nur Folgendes hinzugefügt:

stroke="white" fill="white"

bis zum Ende des Weges. Das andere, was ich tun musste, war den Dateinamen des Hamburgers im HTML zu ändern. Kein Durcheinander mit dem CSS und keine Notwendigkeit, ein anderes Symbol aufzuspüren.

Easy-peasey! Sie können dies nachahmen, um Ihrem Hamburger eine beliebige Farbe zu verleihen.

Wenn Sie mit sass Version von Bootstrap arbeiten _variables.scsskönnen Sie finden $navbar-inverse-toggler-bgoder $navbar-light-toggler-bgwo können Sie die Farbe und den Stil Ihrer Umschaltknopf ändern.

In HTML müssen Sie verwenden navbar-inverseoder navbar-lightabhängig davon, welche Version Sie verwenden möchten.

Alternativ können Sie immer eine einfachere Problemumgehung versuchen, indem Sie ein anderes Symbol verwenden, zum Beispiel:

<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

So erhalten Sie die vollständige Kontrolle über Farbe und Größe:

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

( Der angewendete Stil der Schaltfläche dient nur zum schnellen Testen ):

Standard-Bootstrap-Navigationssymbol

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

Font Awesome Icon hinzufügen und entfernen class="navbar-toggler-icon"

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

Überprüfen Sie die beste Lösung für benutzerdefinierte Hamburger Navi.

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

Demo-Bild