Bootstrap 4 Thay đổi màu sắc của bánh hamburger

Tôi có một trang web bootstrap nơi nút chuyển đổi bánh hamburger được thêm vào khi kích thước màn hình nhỏ hơn 992px. Mã như vậy:

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

Có khả năng thay đổi màu sắc của nút bật tắt bánh hamburger không?

Các navbar-toggler-icon(bánh hamburger) trong Bootstrap 4 sử dụng tập tin SVG lên background-image. Có 2 "phiên bản" của hình ảnh biểu tượng bật tắt. Một cho thanh điều hướng sáng và một cho thanh điều hướng tối ...

• Sử dụng navbar-darkcho chuyển đổi ánh sáng / trắng trên nền tối hơn
• Sử dụng navbar-lightcho chuyển đổi tối / xám trên nền sáng hơ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;..");
}

Do đó, nếu bạn muốn thay đổi màu sắc của hình ảnh chuyển đổi sang màu khác, bạn có thể tùy chỉnh biểu tượng. Ví dụ: ở đây tôi đặt giá trị RGB thành màu hồng (255,102,203). Lưu ý stroke='rgba(255,102,203, 0.5)'giá trị trong dữ liệu 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, một tùy chọn khác để chỉ sử dụng một biểu tượng từ thư viện khác, ví dụ: Font Awesome, v.v.

Cập nhật Bootstrap 4.0.0:

Kể từ Bootstrap 4 Beta, navbar-inversebây giờ được navbar-darksử dụng trên các thanh điều hướng có màu nền tối hơn để tạo ra các liên kết và màu chuyển đổi nhẹ hơn.

Cách thay đổi màu của Bootstrap 4 Navbar

Sử dụng một biểu tượng phông chữ tuyệt vời làm biểu tượng mặc định của thanh điều hướng của bạn.

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

Hoặc thử điều này trên các phiên bản cũ có phông chữ tuyệt vời:

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

Bạn có thể tạo nút bật tắt chỉ với css một cách rất dễ dàng, không cần sử dụng bất kỳ phông chữ nào trong SVG hay ... foramt.

Nút của bạn:

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

Kiểu nút của bạn:

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

}

Kiểu đường ngang của bạn:

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

}

Bản giới thiệu

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

chỉ cần chèn lớp navbar-darkhoặc navbar-lighttrong phần tử điều hướng:

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

Cách dễ nhất là thay thế mã bootstrap mặc định này:

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

bởi cái này:

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

Và đừng quên thêm mã này vào tệp của bạn:

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

Hy vọng nó giúp!!

Nếu bạn đã tải xuống bootstrap, hãy truy cập bootstrap-4.4.1-dist / css / bootstrap.min

Tôi. tìm .navbar-light .navbar-toggler-iconhoặc .navbar-dark .navbar-toggler-iconbộ chọn

ii. chọn thuộc tính background-image và giá trị của nó. Đoạn mã trông như thế này:

.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. sao chép đoạn mã và dán vào CSS tùy chỉnh của bạn

iv. thay đổi stroke=’rgba(0,0,0,0.5)’giá trị thành giá trị rgba ưa thích của bạn

CHỈNH SỬA: xấu của tôi! Với câu trả lời của tôi, biểu tượng sẽ không hoạt động như một nút bật tắt Trên thực tế, nó sẽ được hiển thị ngay cả khi không bị thu gọn ... Vẫn đang tìm kiếm ...

Điều này sẽ hoạt động:

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

Mẹo được đề xuất bởi câu trả lời của tôi là thay thế navbar-togglerbằng một lớp nút cổ điển btnvà sau đó, như đã trả lời trước đó, sử dụng một phông chữ biểu tượng.

Lưu ý, nếu bạn giữ lại <button class="navbar-toggler">, nút sẽ có hình dạng "lạ".

Như đã nêu trong bài đăng này trên github , bootstrap sử dụng một số "thủ thuật css", vì vậy người dùng không cần phải dựa vào phông chữ.

Vì vậy, chỉ cần không sử dụng "navbar-toggler"lớp trên nút của bạn nếu bạn muốn sử dụng phông chữ biểu tượng.

Chúc mừng.

Tôi vừa phát triển một giải pháp dễ dàng hơn đáng kể. (Vâng, tôi biết đây là một câu hỏi cũ nhưng ai đó nghiên cứu vấn đề tương tự có thể thấy điều này hữu ích.)

Tôi đang sử dụng SVG có tên là hamburger.svg. Tôi đã xem xét nó bằng trình soạn thảo văn bản và không thể tìm thấy bất kỳ thứ gì đang đặt màu cho ba dòng - tôi đoán nó mặc định là màu đen vì đó chắc chắn là hành vi tôi nhận được - vì vậy tôi chỉ cần thêm một tham số "nét vẽ" vào định nghĩa của SVG. Điều đó không hiệu quả QUITE - đường viền của ba dòng là màu tôi chọn (trắng) nhưng phần còn lại của dòng vẫn là màu đen nên tôi cũng đã thêm thông số "điền vào". Và đó đã thành công!

Đây là mã cho toàn bộ hamburger.svg ban đầu:

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

Và đây là mã cho SVG mới sau khi tôi chỉnh sửa nó và lưu nó thành 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>

Như bạn có thể thấy nếu bạn cuộn qua bên phải, tất cả những gì tôi đã làm là thêm:

stroke="white" fill="white"

đến cuối con đường. Điều khác tôi phải làm là thay đổi tên tệp của bánh hamburger trong HTML. Không gây rối với CSS và không cần theo dõi biểu tượng khác.

Dễ thương! Bạn có thể bắt chước điều này để làm cho chiếc bánh hamburger của bạn có bất kỳ màu nào bạn thích.

Nếu bạn làm việc với phiên bản bootstrap sass, _variables.scssbạn có thể tìm thấy $navbar-inverse-toggler-bghoặc $navbar-light-toggler-bgnơi bạn có thể thay đổi màu sắc và kiểu nút bật tắt của mình.

Trong html bạn phải sử dụng navbar-inversehoặc navbar-lighttùy thuộc vào phiên bản mà bạn muốn sử dụng.

Thay vào đó, bạn luôn có thể thử một giải pháp đơn giản hơn, sử dụng một biểu tượng khác, ví dụ:

<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

Vì vậy, bạn có toàn quyền kiểm soát màu sắc và kích thước của chúng:

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

( kiểu của nút được áp dụng chỉ là để kiểm tra nhanh ):

Biểu tượng điều hướng bootstrap mặc định

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

Thêm biểu tượng phông chữ tuyệt vời và xóa class="navbar-toggler-icon"

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

Kiểm tra giải pháp tốt nhất cho nav hamburger tùy chỉnh.

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

hình ảnh demo