wake-up-neo.com

Bootstrap 4 Ändern Sie die Farbe des Hamburger Togglers

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?

62
Rehan

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

  • Verwenden Sie navbar-dark für einen hell/weißen Toggler auf dunkleren Hintergründen
  • Verwenden Sie navbar-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.


So ändern Sie Bootstrap 4 Navbar-Farben

130
Zim

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

Wenn Sie mit der sass-Version von bootstrap in_variables.scssarbeiten, können Sie$navbar-inverse-toggler-bgoder$navbar-light-toggler-bgfinden, wo Sie die Farbe und den Stil Ihrer Umschaltfläche ändern können.

In HTML müssen Sienavbar-inverseodernavbar-lightverwenden, je nachdem welche Version Sie verwenden möchten.

1
nedeco

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.

1
stockersky

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

 enter image description here

(Die angewendete Schaltfläche ist nur für einen schnellen Test):

0
Igor Parra

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>

0
Ghafor Sabury

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

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

Demo Image

0
habibullah khan