Bootstrap 4 Ändern Sie die Farbe des Hamburger Toggler

123

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?

css  twitter-bootstrap  bootstrap-4 
— Rehan
quelle
2
Code läuft nicht wie in bootply
— Jordan.JD
Nicht wirklich eine Antwort, aber man kann mit dem navbar-toggler-Symbol spielen , um advertentiekracht.nl/togglerIcon.html Es toggler-Symbol Schopf aus dem Sumpf als externes Stilelement verwendet anstelle des Verweises auf den Bootstrap - Style-Sheet. Es wird auch erklärt, wie das geht.
— Ben Thijssen

Antworten:

244

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

— Zim
quelle
2
In Bootstrap 4 Beta 1 gibt es keine .navbar-inverseKlasse. Sie können zwischen zwei Klassen wählen: .navbar-lightoder .navbar-dark.
— Qrzysio
53

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>
— Amirreza Mohammadi
quelle
3
Verwenden Sie für Fontawesome 5 Balken. fontawesome.com/icons/bars?style=solid
— Murtaza Bhurgri
Es ist die beste Idee.
— Shiva Manhar
7

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>
Erweitern Sie das Snippet

— Ghafor Sabury
quelle
5

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>
— Thái An Nguyễn
quelle
4

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

— Prateek Gupta
quelle
3

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");
}
Erweitern Sie das Snippet

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

— Eyoab
quelle
2

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.

— stockersky
quelle
Dies "funktioniert" nur, wenn Sie Font Awesome verwenden, das nicht Teil von Bootstrap
— Zim
Ich denke, Sie müssen den Kommentar zu der Antwort von Amirreza Mohammadi in der Liste entfernen. Vielen Dank.
— NoChance
2

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.

— Henry
quelle
1

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.

— nedeco
quelle
funktioniert nicht in Bootstrap 4 in Bezug auf Navbar-Light
— Botbot
1

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

Geben Sie hier die Bildbeschreibung ein

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

— Igor Parra
quelle
1

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>

— Md. Rana
quelle
0

Ü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>
Erweitern Sie das Snippet

Demo-Bild

— Habibullah Khan
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.