Bootstrap 4 Zmień kolor przełącznika Hamburger

Mam witrynę typu bootstrap, w której przełącznik hamburgera jest dodawany, gdy rozmiar ekranu jest mniejszy niż 992px. Kod wygląda tak:

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

Czy istnieje możliwość zmiany koloru przycisku przełącznika hamburgera?

navbar-toggler-icon(Hamburger) w Bootstrap 4 wykorzystuje SVG background-image. Istnieją dwie „wersje” obrazu ikony przełącznika. Jeden dla jasnego paska nawigacyjnego i jeden dla ciemnego paska nawigacyjnego ...

• Służy navbar-darkdo przełączania jasnych / białych na ciemniejsze tła
• Użyj navbar-lightdla ciemnego / szarego przełącznika na jaśniejszym tle

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

Dlatego jeśli chcesz zmienić kolor obrazu przełącznika na inny, możesz dostosować ikonę. Na przykład tutaj ustawiam wartość RGB na różowy (255,102,203). Zwróć uwagę na stroke='rgba(255,102,203, 0.5)'wartość w danych 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, kolejna opcja, aby po prostu użyć ikony z innej biblioteki, np .: Font Awesome itp.

Zaktualizuj Bootstrap 4.0.0:

Począwszy od wersji Beta Bootstrap 4, navbar-inversemożna go teraz navbar-darkużywać na paskach nawigacyjnych z ciemniejszymi kolorami tła, aby uzyskać jaśniejsze łącza i przełączane kolory.

Jak zmienić kolory paska nawigacyjnego w Bootstrap 4

Użyj niesamowitej ikony czcionki jako domyślnej ikony paska nawigacyjnego.

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

Lub spróbuj tego na starych wersjach niesamowitych czcionek:

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

Przycisk toggler można stworzyć z css tylko w bardzo prosty sposób, nie ma potrzeby używania żadnych czcionek w SVG czy ... foramt.

Twój przycisk:

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

Twój styl przycisku:

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

}

Twój styl linii poziomej:

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

}

Próbny

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

wystarczy wstawić klasę navbar-darklub navbar-lightelement nav:

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

Najłatwiej jest zastąpić ten domyślny kod bootstrap:

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

przez to :

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

I nie zapomnij dodać tego kodu również do swojego pliku:

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

Mam nadzieję, że to pomoże!!

Jeśli pobrałeś bootstrap, przejdź do bootstrap-4.4.1-dist / css / bootstrap.min

ja. znajdź selektor .navbar-light .navbar-toggler-iconlub.navbar-dark .navbar-toggler-icon

ii. wybierz atrybut obraz tła i jego wartość. Fragment wygląda następująco:

.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. skopiuj fragment i wklej go w swoim niestandardowym arkuszu CSS

iv. zmień stroke=’rgba(0,0,0,0.5)’wartość na preferowaną wartość rgba

EDYCJA: mój błąd! Po mojej odpowiedzi ikona nie będzie zachowywać się jak przełącznik W rzeczywistości będzie wyświetlana nawet wtedy, gdy nie jest zwinięta ... Wciąż szukam ...

To zadziała:

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

Sztuczka zaproponowana przez moją odpowiedź polega na zastąpieniu navbar-togglerklasycznej klasy przycisku, btna następnie, jak już wspomniano , użyj czcionki ikon.

Zwróć uwagę, że jeśli go zatrzymasz <button class="navbar-toggler">, przycisk będzie miał „dziwny” kształt.

Jak wspomniano w tym poście na githubie , bootstrap używa pewnych "sztuczek css", więc użytkownicy nie muszą polegać na czcionkach.

Więc po prostu nie używaj "navbar-toggler"klasy na swoim przycisku, jeśli chcesz użyć czcionki ikony.

Twoje zdrowie.

Właśnie opracowałem znacznie łatwiejsze rozwiązanie. (Tak, wiem, że to stare pytanie, ale ktoś badający ten sam problem może uznać je za przydatne).

Używałem pliku SVG o nazwie hamburger.svg. Spojrzałem na to za pomocą edytora tekstu i nie mogłem znaleźć niczego, co ustawiałoby kolor dla trzech linii - domyślam się, że domyślnie jest to czarny, ponieważ z pewnością jest to zachowanie, które otrzymuję - więc po prostu dodałem parametr „obrys” do definicja SVG. To nie DOKŁADNIE zadziałało - granice trzech linii miały wybrany przeze mnie kolor (biały), ale reszta linii była nadal czarna, więc dodałem również parametr „wypełnienie”. I to załatwiło sprawę!

Oto kod oryginalnego pliku hamburger.svg w całości:

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

A oto kod nowego pliku SVG po jego edycji i zapisaniu jako 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>

Jak widać, po przewinięciu w prawo, dodałem tylko:

stroke="white" fill="white"

na sam koniec ścieżki. Inną rzeczą, którą musiałem zrobić, była zmiana nazwy pliku hamburgera w HTML. Żadnego bałaganu z CSS i nie ma potrzeby szukania kolejnej ikony.

Spokojnie! Możesz to naśladować, aby zrobić hamburgera w dowolnym kolorze.

Jeśli pracujesz z wersją bootstrap sass _variables.scss, możesz znaleźć $navbar-inverse-toggler-bglub $navbar-light-toggler-bgzmienić kolor i styl przycisku przełączania.

W html musisz użyć navbar-inverselub w navbar-lightzależności od wersji, której chcesz użyć.

Alternatywnie zawsze możesz wypróbować prostsze obejście, używając innej ikony, na przykład:

<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

Dzięki temu zyskujesz całkowitą kontrolę nad ich kolorem i rozmiarem:

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

( zastosowany styl przycisku służy tylko do szybkiego testu ):

Domyślna ikona paska nawigacyjnego programu startowego

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

Dodaj ikonę Font Awesome i usuń class="navbar-toggler-icon"

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

Sprawdź najlepsze rozwiązanie dla niestandardowej nawigacji do hamburgerów.

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

obraz demonstracyjny