Bootstrap 4 เปลี่ยนสี Toggler ของแฮมเบอร์เกอร์

126

ฉันมีเว็บไซต์ bootstrap ที่เพิ่มตัวสลับแฮมเบอร์เกอร์เมื่อขนาดหน้าจอน้อยกว่า 992px รหัสเป็นดังนี้:

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

มีความเป็นไปได้ที่จะเปลี่ยนสีของปุ่มสลับแฮมเบอร์เกอร์หรือไม่?

css  twitter-bootstrap  bootstrap-4 
— Rehan
แหล่งที่มา
2
รหัสไม่ทำงานตามที่อยู่ใน bootply
— Jordan.JD
ไม่ได้จริงๆคำตอบ แต่คุณสามารถเล่นรอบกับ-toggler ไอคอน navbar ที่advertentiekracht.nl/togglerIcon.htmlมีวัฏจักร toggler ไอคอนถูกนำมาใช้เป็นองค์ประกอบสไตล์ภายนอกแทนหมายถึงบูตสไตล์แผ่น นอกจากนี้ยังมีการอธิบายวิธีการจัดการ
— ben Thijssen

คำตอบ:

245

navbar-toggler-icon(แฮมเบอร์เกอร์) ในเงินทุนที่ 4 ใช้ background-imageSVG รูปภาพไอคอนตัวสลับมี "เวอร์ชัน" 2 รายการ หนึ่งสำหรับแถบนำทางแบบสว่างและอีกอันสำหรับแถบนำทางที่มืด ...

  • ใช้navbar-darkสำหรับสลับแสง / สีขาวบนพื้นหลังที่มืดกว่า
  • ใช้navbar-lightสำหรับตัวสลับสีเข้ม / เทาบนพื้นหลังสีอ่อน
// 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;..");
}

ดังนั้นหากคุณต้องการเปลี่ยนสีของรูปภาพตัวสลับเป็นอย่างอื่นคุณสามารถปรับแต่งไอคอนได้ ตัวอย่างเช่นที่นี่ฉันตั้งค่า RGB เป็นสีชมพู (255,102,203) สังเกตstroke='rgba(255,102,203, 0.5)'ค่าในข้อมูล 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);
}

การสาธิต http://www.codeply.com/go/4FdZGlPMNV

OFC อีกทางเลือกหนึ่งในการใช้ไอคอนจากไลบรารีอื่นเช่น Font Awesome เป็นต้น

อัปเดต Bootstrap 4.0.0:

สำหรับ Bootstrap 4 Beta navbar-inverseตอนนี้navbar-darkใช้กับแถบนำทางที่มีสีพื้นหลังเข้มขึ้นเพื่อสร้างลิงค์และสีสลับที่เบากว่า

วิธีเปลี่ยนสี Bootstrap 4 Navbar

— ซิม
แหล่งที่มา
2
ใน Bootstrap 4 beta 1 ไม่มี.navbar-inverseคลาส คุณสามารถเลือกจากสองคลาส: .navbar-lightหรือ.navbar-dark.
— Qrzysio
55

ใช้ไอคอนแบบอักษรที่ยอดเยี่ยมเป็นไอคอนเริ่มต้นของแถบนำทางของคุณ

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

หรือลองใช้กับฟอนต์รุ่นเก่าที่น่ากลัว:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
— Amirreza Mohammadi
แหล่งที่มา
3
สำหรับ fontawesome 5 ใช้แถบ fontawesome.com/icons/bars?style=solid
— Murtaza Bhurgri
7

คุณสามารถสร้างปุ่มสลับด้วย css ได้ด้วยวิธีที่ง่ายมากไม่จำเป็นต้องใช้แบบอักษรใด ๆ ใน SVG หรือ ... foramt

ปุ่มของคุณ:

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

รูปแบบปุ่มของคุณ:

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

}

สไตล์เส้นแนวนอนของคุณ:

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

}

การสาธิต

.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>
ขยายข้อมูลโค้ด

— Ghafor Sabury
แหล่งที่มา
6

เพียงแค่แทรกคลาสnavbar-darkหรือnavbar-lightในองค์ประกอบ nav:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
— Thái An Nguyễn
แหล่งที่มา
4

วิธีที่ง่ายที่สุดคือแทนที่รหัส 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>

โดยสิ่งนี้ :

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

และอย่าลืมเพิ่มรหัสนี้ในไฟล์ของคุณด้วย:

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

หวังว่าจะช่วย !!

— ปราเตกคุปตะ
แหล่งที่มา
4

หากคุณดาวน์โหลด bootstrap ไปที่ bootstrap-4.4.1-dist/css/bootstrap.min.css

  1. ค้นหา.navbar-light .navbar-toggler-iconหรือ.navbar-dark .navbar-toggler-iconตัวเลือก

  2. เลือกbackground-imageแอตทริบิวต์และค่าของมัน ตัวอย่างมีลักษณะดังนี้:

    .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. คัดลอกข้อมูลโค้ดและวางใน CSS ที่คุณกำหนดเอง

  4. เปลี่ยนstroke='rgba(0, 0, 0, 0.5)'ค่าเป็นค่า rgba ที่คุณต้องการ

— Eyoab
แหล่งที่มา
2

แก้ไข: ฉันไม่ดี! ด้วยคำตอบของฉันไอคอนจะไม่ทำงานเป็นตัวสลับ จริงๆมันจะแสดงแม้ว่าจะไม่ยุบ ... ยังคงค้นหา ...

สิ่งนี้จะได้ผล:

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

เคล็ดลับที่เสนอโดยคำตอบของฉันคือการแทนที่navbar-togglerด้วยคลาสปุ่มคลาสสิกbtnจากนั้นใช้แบบอักษรไอคอนตามที่ตอบไว้ก่อนหน้านี้

โปรดทราบว่าหากคุณเก็บไว้<button class="navbar-toggler">ปุ่มจะมีรูปร่าง "แปลก"

ตามที่ระบุไว้ในโพสต์บน githubนี้ bootstrap ใช้ "เล่ห์เหลี่ยม css" ดังนั้นผู้ใช้จึงไม่จำเป็นต้องพึ่งพาฟอนต์

ดังนั้นอย่าใช้"navbar-toggler"ชั้นเรียนบนปุ่มของคุณหากคุณต้องการใช้แบบอักษรไอคอน

ไชโย

— stockersky
แหล่งที่มา
สิ่งนี้จะ "ใช้ได้ผล" หากคุณใช้ Font Awesome ซึ่งไม่ได้เป็นส่วนหนึ่งของ Bootstrap
— Zim
ฉันเดาว่าคุณต้องลบความคิดเห็นในคำตอบที่ Amirreza Mohammadi ออกจากรายการ ขอบคุณ
— NoChance
2

ฉันเพิ่งพัฒนาโซลูชันที่ง่ายขึ้นมาก (ใช่ฉันรู้ว่านี่เป็นคำถามเก่า แต่มีคนค้นคว้าปัญหาเดียวกันนี้อาจพบว่ามีประโยชน์)

ฉันใช้ SVG ชื่อ hamburger.svg ฉันดูมันด้วยโปรแกรมแก้ไขข้อความและไม่พบสิ่งที่กำหนดสีสำหรับสามบรรทัดฉันเดาว่าค่าเริ่มต้นเป็นสีดำเพราะนั่นเป็นพฤติกรรมที่ฉันได้รับอย่างแน่นอนดังนั้นฉันจึงเพิ่มพารามิเตอร์ "เส้นขีด" ลงใน คำจำกัดความของ SVG มันใช้ไม่ได้ผลเส้นขอบของทั้งสามเส้นเป็นสีที่ฉันเลือก (สีขาว) แต่ส่วนที่เหลือของบรรทัดยังคงเป็นสีดำดังนั้นฉันจึงเพิ่มพารามิเตอร์ "เติม" ด้วย และนั่นก็เป็นเคล็ดลับ!

นี่คือรหัสสำหรับ hamburger.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"/></svg>

และนี่คือรหัสสำหรับ SVG ใหม่หลังจากที่ฉันแก้ไขและบันทึกเป็น 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>

อย่างที่คุณเห็นว่าคุณเลื่อนไปทางขวาหรือไม่ทั้งหมดที่ฉันทำคือเพิ่ม: 

stroke="white" fill="white"

ไปจนสุดเส้นทาง สิ่งอื่นที่ฉันต้องทำคือเปลี่ยนชื่อไฟล์ของแฮมเบอร์เกอร์ใน HTML ไม่ต้องยุ่งกับ CSS เลยและไม่ต้องติดตามไอคอนอื่น

Easy-peasey! คุณสามารถเลียนแบบสิ่งนี้เพื่อทำให้แฮมเบอร์เกอร์ของคุณมีสีตามที่คุณต้องการ

— เฮนรี่
แหล่งที่มา
1

หากคุณทำงานกับ bootstrap เวอร์ชัน sass _variables.scssคุณสามารถค้นหา$navbar-inverse-toggler-bgหรือ$navbar-light-toggler-bgเปลี่ยนสีและรูปแบบของปุ่มสลับได้ที่ไหน

ใน html คุณต้องใช้navbar-inverseหรือnavbar-lightขึ้นอยู่กับเวอร์ชันที่คุณต้องการใช้

— nedeco
แหล่งที่มา
ไม่ทำงานใน bootstrap 4 เกี่ยวกับ navbar-light
— botbot
1

คุณสามารถลองวิธีแก้ปัญหาที่ง่ายกว่านี้ได้เสมอโดยใช้ไอคอนอื่นเช่น: 

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

อ้างอิง: 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>

อ้างอิง: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

ดังนั้นคุณจึงสามารถควบคุมสีและขนาดได้ทั้งหมด:

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

ใส่คำอธิบายภาพที่นี่

( รูปแบบของปุ่มที่ใช้เป็นเพียงการทดสอบอย่างรวดเร็ว ):

— Igor Parra
แหล่งที่มา
1

ไอคอนแถบนำทาง bootstrap เริ่มต้น

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

เพิ่มไอคอน Font Awesome และลบ class="navbar-toggler-icon"

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

— มพ. รสนา
แหล่งที่มา
0

ตรวจสอบวิธีที่ดีที่สุดสำหรับการนำทางแฮมเบอร์เกอร์ที่กำหนดเอง

@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>
ขยายข้อมูลโค้ด

ภาพสาธิต

— ฮาบิบุลเลาะห์ข่าน
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.