Ich habe eine Bootstrap-Website, auf der die Hamburger
hinzugefügt wird, wenn der Bildschirm weniger als 992px beträgt. Der HamBurger Code ist so
<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 Buttons zu ändern?
Der navbar-toggler-icon
(Hamburger) in Bootstrap 4 verwendet einen SVG background-image
. Es gibt 2 "Versionen" des Toggle-Symbolbildes. Eine für eine leichte Navbar und eine für eine dunkle Navbar ...
navbar-dark
für einen hell/weißen Toggler auf dunkleren Hintergründennavbar-light
für einen dunklen/grauen Toggler 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 also die Farbe des Toggle-Bildes ändern möchten, können Sie das Symbol anpassen. Zum Beispiel habe ich hier den RGB-Wert auf pink (255,102,203) gesetzt. 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);
}
Demohttp://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:
Seit Bootstrap 4 Beta ist navbar-inverse
jetzt navbar-dark
für Navbars mit dunkleren Hintergrundfarben, um hellere Link- und Toggler-Farben zu erzeugen.
verwenden Sie einfach ein font-awesome im "i" -Tag im Standardsymbolbereich und ändern Sie dann die Farbe des hinzugefügten Symbols mit CSS.
<span class="navbar-toggler-icon">
<i class="fa fa-navicon"></i>
</span>
.fa.fa-navicon {
color:white;
}
Wenn Sie mit der sass-Version von bootstrap in_variables.scss
arbeiten, können Sie$navbar-inverse-toggler-bg
oder$navbar-light-toggler-bg
finden, wo Sie die Farbe und den Stil Ihrer Umschaltfläche ändern können.
In HTML müssen Sienavbar-inverse
odernavbar-light
verwenden, je nachdem welche Version Sie verwenden möchten.
EDIT: mein schlechtes! Bei meiner Antwort verhält sich das Symbol nicht wie ein Toggler Eigentlich wird es auch angezeigt, wenn es nicht kollabiert ist ... Wird noch gesucht ...
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, navbar-toggler
durch eine klassische Tastenklasse btn
zu ersetzen und dann, wie bereits erwähnt, eine Symbolschriftart zu verwenden.
Beachten Sie, dass die Schaltfläche eine "seltsame" Form hat, wenn Sie <button class="navbar-toggler">
beibehalten.
Wie in diesem Post auf github angegeben, verwendet bootstrap einige "css-Tricks", sodass Benutzer sich nicht auf Schriftarten verlassen müssen.
Verwenden Sie also nicht die Klasse "navbar-toggler"
für Ihre Schaltfläche, wenn Sie eine Symbolschriftart verwenden möchten.
Prost.
Als Alternative können Sie immer eine einfachere Problemumgehung versuchen, z. B. mit einem anderen Symbol:
<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 haben Sie die vollständige Kontrolle über Farbe und Größe:
button span {
/*overwriting*/
color: white;
font-size: 25px;
}
(Die angewendete Schaltfläche ist nur für einen schnellen Test):
Sie können die Toggle-Schaltfläche mit css nur auf sehr einfache Weise erstellen. In SVG oder ... foramt müssen Sie keine Schriftarten verwenden.
Dein Knopf:
<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 Knopfstil:
.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-dark
oder navbar-light
in das nav-Element ein:
<nav class="navbar navbar-dark navbar-expand-md">
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
Überprüfen Sie die beste Lösung für benutzerdefinierte Hamburgernavigation.
@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>