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

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

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

Final adjustment Furthermore, the background color and brand name are adjusted to complete the process.

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