Bootstrap 4 Hamburger Toggler Rengini Değiştir

Ekran boyutu 992 pikselden az olduğunda hamburger toggler'ın eklendiği bir bootstrap web sitem var. Kod şöyle:

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

Hamburger toggler düğmesinin rengini değiştirme imkanı var mı?

navbar-toggler-iconBootstrap 4 (hamburger) bir SVG'yi kullanır background-image. Değiştirici simge görüntüsünün 2 "sürümü" vardır. Biri hafif bir gezinme çubuğu için, diğeri karanlık bir gezinme çubuğu için ...

• Daha navbar-darkkoyu arka planlarda açık / beyaz geçiş yapmak için kullanın
• navbar-lightDaha açık renkli arka planlarda koyu / gri geçiş yapmak için kullanın

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

Bu nedenle, geçiş yapan görüntünün rengini başka bir şeye değiştirmek isterseniz, simgeyi özelleştirebilirsiniz. Örneğin, burada RGB değerini pembe olarak ayarlıyorum (255,102,203). stroke='rgba(255,102,203, 0.5)'SVG verilerindeki değere dikkat edin :

.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, başka bir kütüphaneden bir simgeyi kullanmak için başka bir seçenek, yani: Font Awesome, vb.

Bootstrap 4.0.0'ı güncelleyin:

Bootstrap 4 Beta'dan itibaren, navbar-inverseartık navbar-darkdaha koyu arka plan renklerine sahip gezinti çubuklarında daha açık bağlantı ve geçişli renkler üretmek için kullanılacak.

Bootstrap 4 Navbar renkleri nasıl değiştirilir

Gezinme çubuğunuzun varsayılan simgesi olarak harika bir yazı tipi simgesi kullanın .

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

Veya bunu eski yazı tipi harika sürümlerinde deneyin:

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

Değiştirici butonu css ile sadece çok kolay bir şekilde oluşturabilirsiniz, SVG veya ... foramt'ta herhangi bir yazı tipi kullanmaya gerek yoktur.

Düğmeniz:

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

Düğme Stiliniz:

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

}

Yatay çizgi Stiliniz:

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

}

gösteri

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

sadece sınıfı navbar-darkveya navbar-lightnav öğesine ekleyin :

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

En kolay yol, bu varsayılan önyükleme kodunu değiştirmektir:

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

bundan :

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

Ve bu kodu dosyanıza da eklemeyi unutmayın:

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

Umarım yardımcı olur!!

Bootstrap'i indirdiyseniz, şu adrese gidin: bootstrap-4.4.1-dist/css/bootstrap.min.css

1. .navbar-light .navbar-toggler-iconveya .navbar-dark .navbar-toggler-iconseçiciyi bul

2. seçmek background-imageniteliği ve değerini. Snippet şuna benzer:

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

3. pasajı kopyalayın ve özel CSS'nize yapıştırın

4. değiştirmek stroke='rgba(0, 0, 0, 0.5)'tercih RGBA değerine değer

DÜZENLEME: benim hatam! Cevabımla, simge değiştirici gibi davranmayacak Aslında, daraltılmadığında bile gösterilecek ... Hala arıyor ...

Bu işe yarar:

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

Cevabımın önerdiği numara, navbar-togglerklasik bir düğme sınıfıyla değiştirmek btnve daha önce yanıtlandığı gibi, bir simge yazı tipi kullanmaktır.

Unutmayın, eğer tutarsanız <button class="navbar-toggler">, düğme "tuhaf" bir şekle sahip olacaktır.

Github'daki bu yazıda belirtildiği gibi , bootstrap bazı "css hileleri" kullanır, bu nedenle kullanıcıların yazı tiplerine güvenmesi gerekmez.

Bu nedenle, "navbar-toggler"bir simge yazı tipi kullanmak istiyorsanız düğmenizdeki sınıfı kullanmayın.

Şerefe.

Az önce oldukça kolay bir çözüm geliştirdim. (Evet, bunun eski bir soru olduğunu biliyorum, ancak aynı sorunu araştıran biri bunu faydalı bulabilir.)

Hamburger.svg adlı bir SVG kullanıyordum. Bir metin düzenleyiciyle baktım ve üç satır için renk ayarlayan hiçbir şey bulamadım - sanırım varsayılan olarak siyah oluyor çünkü bu kesinlikle aldığım davranış - bu yüzden sadece bir "vuruş" parametresi ekledim SVG'nin tanımı. Bu QUITE çalışmadı - üç çizginin sınırları benim seçtiğim renkti (beyaz) ama çizginin geri kalanı hala siyahtı, bu yüzden bir "dolgu" parametresi de ekledim. Ve bu hile yaptı!

Orijinal hamburger.svg kodunun tamamı:

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

Ve işte yeni SVG'yi düzenledikten ve hamburger_white.svg olarak kaydettikten sonraki kodu:

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

Gördüğünüz gibi sağa kaydırırsanız, tek yaptığım eklemek oldu:

stroke="white" fill="white"

yolun sonuna kadar. Yapmam gereken diğer şey hamburgerin HTML'deki dosya adını değiştirmekti. CSS ile hiçbir şekilde uğraşmayın ve başka bir simgeyi bulmaya gerek yok.

Kolay peasey! Hamburgerinizi istediğiniz renkte yapmak için bunu taklit edebilirsiniz.

Bootstrap'in sass sürümüyle çalışıyorsanız , geçiş düğmenizin rengini ve stilini _variables.scssbulabilir $navbar-inverse-toggler-bgveya $navbar-light-toggler-bgnerede değiştirebileceğinizi bulabilirsiniz .

Html size kullanımına sahip navbar-inverseveya navbar-lightkullanımdaki istediğiniz sürüme bağlı.

Alternatif olarak, her zaman daha basit bir çözüm deneyebilirsiniz, örneğin başka bir simge kullanarak:

<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

Böylece renkleri ve boyutları üzerinde tam kontrole sahip olursunuz:

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

( uygulanan düğmenin stili yalnızca hızlı bir test içindir ):

Varsayılan önyükleme gezinme çubuğu simgesi

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

Font Awesome Simgesi Ekle ve Kaldır class="navbar-toggler-icon"

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

Özel hamburger nav için en iyi çözümü kontrol edin.

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