Bootstrap 4 Ubah Warna Pengalih Hamburger

Saya memiliki situs web bootstrap di mana toggler hamburger ditambahkan ketika ukuran layar kurang dari 992px. Kodenya seperti ini:

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

Apakah ada kemungkinan untuk mengubah warna tombol toggler hamburger?

The navbar-toggler-icon(hamburger) di Bootstrap 4 menggunakan SVG background-image. Ada 2 "versi" dari gambar ikon toggler. Satu untuk bilah navigasi terang, dan satu lagi untuk bilah navigasi gelap ...

• Gunakan navbar-darkuntuk pengalih terang / putih di latar belakang yang lebih gelap
• Gunakan navbar-lightuntuk pengalih gelap / abu-abu pada latar belakang yang lebih terang

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

Oleh karena itu, jika Anda ingin mengubah warna gambar toggler menjadi sesuatu yang lain, Anda dapat menyesuaikan ikonnya. Sebagai contoh, disini saya mengatur nilai RGB menjadi pink (255.102.203). Perhatikan stroke='rgba(255,102,203, 0.5)'nilai dalam data 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, opsi lain untuk hanya menggunakan ikon dari pustaka lain yaitu: Font Awesome, dll.

Perbarui Bootstrap 4.0.0:

Mulai dari Bootstrap 4 Beta, navbar-inversesekarang navbar-darkdigunakan pada navbar dengan warna latar belakang yang lebih gelap untuk menghasilkan tautan yang lebih terang dan warna toggler.

Bagaimana mengubah warna Bootstrap 4 Navbar

Gunakan ikon font-mengagumkan sebagai ikon default bilah navigasi Anda.

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

Atau coba ini pada versi font-awesome lama:

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

Anda dapat membuat tombol toggler dengan css hanya dengan cara yang sangat mudah, tidak perlu menggunakan font apa pun di SVG atau ... foramt.

Tombol Anda:

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

Gaya Tombol Anda:

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

}

Gaya Garis Horizontal Anda:

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

cukup masukkan kelas navbar-darkatau navbar-lightdi elemen nav:

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

Cara termudah adalah mengganti kode bootstrap default ini:

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

dengan ini :

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

Dan jangan lupa untuk menambahkan kode ini juga ke file Anda:

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

Semoga membantu !!

Jika Anda mengunduh bootstrap, buka bootstrap-4.4.1-dist / css / bootstrap.min

saya. temukan .navbar-light .navbar-toggler-iconatau .navbar-dark .navbar-toggler-iconselektor

ii. pilih atribut gambar latar belakang dan nilainya. Cuplikannya terlihat seperti ini:

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

aku aku aku. salin cuplikan tersebut dan tempelkan di CSS khusus Anda

iv. ubah stroke=’rgba(0,0,0,0.5)’nilainya menjadi nilai rgba pilihan Anda

EDIT: saya buruk! Dengan jawaban saya, ikon tidak akan berfungsi sebagai toggler Sebenarnya, itu akan ditampilkan bahkan saat tidak diciutkan ... Masih mencari ...

Ini akan berhasil:

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

Trik yang diusulkan oleh jawaban saya adalah mengganti navbar-togglerdengan kelas tombol klasik btndan kemudian, seperti yang dijawab sebelumnya, gunakan font ikon.

Perhatikan, jika Anda tetap menyimpannya <button class="navbar-toggler">, tombol tersebut akan memiliki bentuk yang "aneh".

Seperti yang dinyatakan dalam posting ini di github , bootstrap menggunakan beberapa "tipuan css", jadi pengguna tidak perlu bergantung pada font.

Jadi, jangan gunakan "navbar-toggler"kelas pada tombol Anda jika Anda ingin menggunakan font ikon.

Bersulang.

Saya baru saja mengembangkan solusi yang jauh lebih mudah. (Ya, saya tahu ini adalah pertanyaan lama tetapi seseorang yang meneliti masalah yang sama ini mungkin merasa ini berguna.)

Saya menggunakan SVG yang disebut hamburger.svg. Saya melihatnya dengan editor teks dan tidak dapat menemukan apa pun yang mengatur warna untuk tiga baris - saya kira defaultnya hitam karena memang itulah perilaku yang saya dapatkan - jadi saya cukup menambahkan parameter "goresan" ke definisi SVG. Itu tidak CUKUP bekerja - batas dari tiga garis adalah warna pilihan saya (putih) tetapi sisa garis masih hitam jadi saya menambahkan parameter "isi" juga. Dan itu berhasil!

Berikut kode asli hamburger.svg secara keseluruhan:

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

Dan berikut adalah kode untuk SVG baru setelah saya mengeditnya dan menyimpannya sebagai 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>

Seperti yang Anda lihat jika Anda menggulir ke kanan, yang saya lakukan hanyalah menambahkan:

stroke="white" fill="white"

ke ujung jalan. Hal lain yang harus saya lakukan adalah mengubah nama file hamburger di HTML. Tidak mengotak-atik CSS sama sekali dan tidak perlu melacak ikon lain.

Gampang sekali! Anda bisa meniru ini untuk membuat hamburger Anda dengan warna yang Anda suka.

Jika Anda bekerja dengan versi sass dari bootstrap, _variables.scssAnda dapat menemukan $navbar-inverse-toggler-bgatau di $navbar-light-toggler-bgmana Anda dapat mengubah warna dan gaya tombol sakelar.

Dalam html Anda harus menggunakan navbar-inverseatau navbar-lightbergantung pada versi mana yang ingin Anda gunakan.

Sebagai alternatif, Anda selalu dapat mencoba solusi yang lebih sederhana, menggunakan ikon lain, misalnya:

<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

Jadi Anda mendapatkan kendali penuh atas warna dan ukurannya:

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

( gaya tombol yang diterapkan hanya untuk tes cepat ):

Ikon navbar bootstrap default

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

Tambahkan Ikon Font Awesome dan Hapus class="navbar-toggler-icon"

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

Periksa solusi terbaik untuk nav hamburger khusus.

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

gambar demo