Notes

Notes - notes.io

Skip to content
Tutorials
Student
Jobs
Courses

Write
Write
Come write articles for us and get featured
Practice
Practice
Learn and code with the best industry experts
Premium
Premium
Get access to ad-free content, doubt assistance and more!
Jobs
Jobs
Come and find your dream job with us
Geeks Digest
Quizzes
Geeks Campus
Gblog Articles
IDE
Campus Mantri
Sign In
Sign In
Home
Courses
Algorithms
Analysis of Algorithms
Data Structures
Languages
Interview Corner
GATE
ISRO CS
UGC NET CS
CS Subjects
Web Technologies
School Learning
Mathematics
Maths Notes (Class 8-11)
NCERT Solutions
RD Sharma Solutions
Student
Jobs
GBlog
Puzzles
What's New ?
Change Language
Related Articles
▲
Related Articles
Bootstrap (Part-5) | DropDowns and Responsive Tabs
Bootstrap (Part-6) | Progress Bar and Jumbotron
Bootstrap (Part-7) | Alerts , Wells, Pagination and Pager
Bootstrap (Part-8) | Badges, Labels, Page Headers
Bootstrap | Navigation Bar
How to change navigation bar color in Bootstrap ?
How to change Hamburger Toggler color in Bootstrap ?
How to align navbar items to the right in Bootstrap 4 ?
How to Align Navbar Items to Center using Bootstrap 4 ?
How to Align navbar logo to the left screen using Bootstrap ?
How to create Nested Accordion using Google AMP amp-accordion?
HTML | <source> srcset Attribute
How to create rotating disc effect using CSS ?
Reading selected webpage content using Python Web Scraping
Bootstrap (Part-2) | Grid System
Bootstrap (Part-3) | Buttons, Glyphicons, Tables
Bootstrap (Part-4) | Vertical Forms, Horizontal Forms, Inline Forms
How to set the button alignment in Bootstrap ?
.pull-left and .pull-right classes in Bootstrap 4
How to align button to right side of text box in Bootstrap?
How to get circular buttons in bootstrap 4 ?
How to change the background color of the active nav-item?
Difference between Bootstrap 4 and Bootstrap 5
Form validation using jQuery
How to pass data into a bootstrap modal?
How to Add Image into Dropdown List for each items ?
How to Align modal content box to center of any screen?
How to change the text and image by just clicking a button in JavaScript ?

How to change Hamburger Toggler color in Bootstrap ?
Last Updated : 16 Apr, 2020
The hamburger toggler color can be changed in Bootstrap 4 using 2 methods:

Method 1: Using the inbuilt color classes

The hamburger toggler color is controlled by the two inbuilt classes used for changing the color of the content in the navigation bar:

.navbar-light: This class is used to set the color of the navigation bar content to dark. It will change the toggler icon to have darker lines.
.navbar-dark: This class is used to set the color of the navigation bar content to light. It will change the toggler icon to have white lines.
Note: The naming seems a little backwards. Shouldn’t it be .navbar-dark to make the content darker and .navbar-light to make it lighter? The -dark and -light represent the color of the background, not of the content on the navbar.

Example:

<!DOCTYPE html>
<html>

<head>
<title>
How to change Hamburger Toggler color in Bootstrap ?
</title>


<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
<nav class="navbar navbar-light bg-lignt">
<a href="/" class="navbar-brand">
Light Toggler
</a>
<button class="navbar-toggler ml-auto"
type="button"
data-toggle="collapse"
data-target="#nav1">
<span class="navbar-toggler-icon my-toggler">
</span>
</button>
<div class="navbar-collapse collapse" id="nav1">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link"
href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link 2</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-dark bg-dark">
<a href="/" class="navbar-brand">
Dark Toggler
</a>
<button class="navbar-toggler ml-auto"
type="button"
data-toggle="collapse"
data-target="#nav2">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="navbar-collapse collapse"
id="nav2">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link"
href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link 2</a>
</li>
</ul>
</div>
</nav>

<div class="container">
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>How to change Hamburger Toggler
color in Bootstrap ?</b>
<p>The above togglers use the default
color classes available for toggler.</p>
</div>

<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>

</html>
Output:
inbuilt

Method 2: Creating a custom class for the toggler

Bootstrap uses an SVG image for representing the toggler. A new image data can be created with modified colors on the lines inside the icon. The stroke property inside the image data is used to represent the color in RGB values. This value is modified to the color required.

This new icon is used in the .navbar-toggler-icon class with the background-image so that the inbuilt icon gets replaced with this new toggler icon.

/* Change the color in the stroke property of the image data */
.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(0, 128, 0, 0.8)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);
}

The border color of the toggler set by specifying the border-color property with the color required.

/* Set the border color to the desired color */
.custom-toggler.navbar-toggler {
border-color: lightgreen;
}
Example:

<!DOCTYPE html>
<html>

<head>
<title>How to change Hamburger
Toggler color in Bootstrap ?</title>


<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
/* Set the border color */

.custom-toggler.navbar-toggler {
border-color: lightgreen;
}
/* Setting the stroke to green using rgb values (0, 128, 0) */

.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(0, 128, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
</style>
</head>

<body>
<nav class="navbar navbar-dark bg-dark">
<a href="/" class="navbar-brand">Custom Toggler</a>
<button class="navbar-toggler ml-auto custom-toggler"
type="button"
data-toggle="collapse"
data-target="#nav3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="nav3">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
</div>
</nav>

<div class="container">
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to change Hamburger Toggler color in Bootstrap ?</b>
<p>The above togglers use the a custom classe for the toggler.</p>
</div>

<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>

</html>
Output:

custom-class

Like
0
Previous
How to change navigation bar color in Bootstrap ?
Next
How to align navbar items to the right in Bootstrap 4 ?
RECOMMENDED ARTICLES
Page :
1
2
3
How to set hamburger items on the right in bootstrap 4 ?
29, Nov 19
How to cover the whole screen when the hamburger menu is pressed on smaller screens?
27, Aug 19
How to convert the hamburger icon of navigation menu to X on click ?
02, Jun 20
How to create Hamburger Menu for mobile devices ?
19, Nov 20
How to change navigation bar color in Bootstrap ?
30, Aug 19
How to change the “checked” background color of toggle switch in Bootstrap 4?
27, Oct 20
How to change font color of the active nav-item in Bootstrap ?
03, Nov 20
How to change font color in dropdown navbar when collapsed in bootstrap ?
03, Nov 20
How to change text color depending on background color using JavaScript?
06, Sep 19
How to change an element color based on value of the color picker value using onclick?
20, Sep 19
How to change an element color based on value of the color picker value on click?
22, Jun 20
How to Drop fill color to change the image color using HTML and CSS ?
22, Feb 21
Include Bootstrap in AngularJS using ng-bootstrap
18, Jun 19
Difference between bootstrap.css and bootstrap-theme.css
13, Mar 20
Difference Between Bootstrap 3 and Bootstrap 4
02, Jun 20
Difference between Bootstrap 4 and Bootstrap 5
09, Jul 20
How to use SASS to create new set of color styles in Bootstrap 4 ?
29, Jan 20
How to change the width and height of Twitter Bootstrap's tooltips?
31, Jan 20
How to change column to row on small display in Bootstrap 4 ?
28, Nov 19
How to change (-, +) symbol with a button in Bootstrap Accordion ?
28, Nov 19
How to change the position of modal close button in bootstrap?
21, Jul 20
How to change the size of a bootstrap pill badge?
26, Nov 20
How to change Bootstrap Carousel Interval at Runtime ?
23, Feb 21
How to convert 3-digit color code to 6-digit color code using JavaScript ?
12, Mar 21
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
sayantanm19
@sayantanm19
Vote for difficulty
Easy
Normal
Medium
Hard
Expert
Improved By :
davidmackey
Article Tags :
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Improve Article
Report Issue

WHAT'S NEW
DSA Self Paced Course
DSA Self Paced Course
Learn DSA with recorded video lectures and aim top product-based companies
View Details
Ad free experience with GeeksforGeeks Premium
Ad free experience with GeeksforGeeks Premium
View Details
Advanced DSA Live Classes for Interview Preparation
Advanced DSA Live Classes for Interview Preparation
Prepare advanced DSA to crack interviews at top product-based companies with these Live Online Classes
View Details

MOST POPULAR IN BOOTSTRAP
How to Use Bootstrap with React?
How to hide div element by default and show it on click using JavaScript and Bootstrap ?
How to make horizontal scrollable in a bootstrap row?
How to display bootstrap carousel with three post in each slide?
How to make Bootstrap table with sticky table head?

MOST VISITED IN WEB TECHNOLOGIES
Installation of Node.js on Linux
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to calculate the number of days between two dates in javascript?
JavaScript Number toString() Method

Writing code in comment? Please use ide.geeksforgeeks.org, generate link and share the link here.

Load Comments
5th Floor, A-118,
Sector-136, Noida, Uttar Pradesh - 201305
[email protected]
Company
About Us
Careers
Privacy Policy
Contact Us
Copyright Policy
Learn
Algorithms
Data Structures
Languages
CS Subjects
Video Tutorials
Practice
Courses
Company-wise
Topic-wise
How to begin?
Contribute
Write an Article
Write Interview Experience
Internships
Videos
@geeksforgeeks , Some rights reserved
Lightbox

Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...

With notes.io;

* You can take a note from anywhere and any device with internet connection.
* You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
* You can quickly share your contents without website, blog and e-mail.
* You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
* Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.

Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.

Easy: Notes.io doesn’t require installation. Just write and share note!

Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )

Free: Notes.io works for 14 years and has been free since the day it was started.

You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;

Email: [email protected]

Twitter: http://twitter.com/notesio

Instagram: http://instagram.com/notes.io

Facebook: http://facebook.com/notesio

Regards;
Notes.io Team

Notes

Notes - notes.io

Shortened Note Link

Long File

Notes