How to change or adjust the burger menu icon, Bootstrap 4
Bootstrap 4’s Navbar (navigation menu) is convenient, but the hamburger menu is a bit uncool, so I hope you can adjust it and use it. Have you ever thought?
In this article, we will easily adjust the Bootstrap 4 hamburger menu.
Completed sample
How to change or adjust the burger menu icon, Bootstrap 4, Erase the border
First, erase the border of the hamburger menu. Apply styles to Bootstrap’s default hamburger menu (code below).
<button class = “navbar-toggler collapsed” 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>
Add style
.navbar-light .navbar-toggler {Navbar – Light . Navbar – Toggler {
Border – Color : Rgba ( 0 , 0 , 0 , 0 );
}
Hamburger menu 2
How to change or adjust the burger menu icon, Bootstrap 4, It’s a little fashionable.
Adjust hamburger menu
Override the default hamburger menu (SVG) with the code below.
.navbar-light .navbar-toggler-icon {Navbar – Light . Navbar – Toggler – Icon {
Background – Image : Url ( “Data: Image / Svg Tasu Xml; Charset = Utf8, Pasento 3Csvg ViewBox = ‘0 0 30 30′
xmlns =’http://www.w3.org/2000/svg’% 3E% 3Cpath stroke =’rgba (51, 51, 51, 1)’
stroke-width = ‘3’ stroke-miterlimit = ’10’ d =’M4 7h22M4 15h22M4 23h22′ /% 3E% 3C / svg% 3E ” );
}
Color specified by stroke =’rgba (51, 51, 51, 1)
Adjust line thickness with stroke-width = ‘3’
Burger menu 3
How to change or adjust the burger menu icon, Bootstrap 4, Final adjustment
Furthermore, the background color and brand name are adjusted to complete the process.
Burger menu 4
How to change or adjust the burger menu icon, Bootstrap 4, If you want to elaborate on the design further, it seems that you need to pick up the hamburger menu from the net or ask the designer.
