Change the color of bootstrap icon bar in navbar

Question

I cannot change the color of toggle icon bar. I want to change the color to white.

<nav class="navbar navbar-toggleable-md navbar-light">
    <button class="navbar-toggler navbar-toggler-right" type="button"  style = "border: 2px solid #E0E0E0;" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon icon-bar" style = "color: white;"></span>
    </button>
    <a class="navbar-brand" href="#">SWAPNIL SARAF</a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">WORK <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">INSPIRATIONS</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">ABOUT</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">CONTACT</a>
            </li>
        </ul>
    </div>
</nav>

style.css

below is my css file:

.navbar .navbar-toggler .icon-bar{
   background-color: white !important;
}

yes its changing the the whole background itself. i only want to change the color of the icon bars to white — swapnil saraf, Mar 28 '17 at 10:30
try my example, i have changed it to red color, replace the color as per your requirement — Ganesh Putta, Mar 28 '17 at 10:39
im trying. but its changing the background color inside of the toggle button. i only want to change the color of the icin bars — swapnil saraf, Mar 28 '17 at 10:49
@SahilDhir actually im using Bootstrap 4, and in your code the css files are of bootstrap 3, because of which my entire css is getting disrupted. so can you please help me out there. — swapnil saraf, Mar 28 '17 at 12:31

score 2 · Accepted Answer · edited May 19 '21 at 09:19

I checked your code structure and the reason why your css code is not working because the .navbar-toggle class was removed from button code as below:

<button class=" navbar-toggler  navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

So add class navbar-toggle in here as the bootstrap css is written on the basis of this class.

<button class=" navbar-toggle navbar-toggler  navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

Also check the example I have tried using your html code:

.navbar .navbar-toggler .icon-bar {
  background: black !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">




<nav class="navbar navbar-toggleable-md navbar-light">
  <button class="navbar-toggle navbar-toggler  navbar-toggler-right" type="button" style="border: 2px solid #E0E0E0;" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon icon-bar" ></span>
            </button>
  <a class="navbar-brand" href="#">SWAPNIL SARAF</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">WORK <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">INSPIRATIONS</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

score 2 · Answer 2 · answered Mar 28 '17 at 10:58

2

I have noticed out two issue here

In style.css

Replace !importtant with !important

use css classs like this way

.navbar-toggler-icon.icon-bar{ background-color: white !important; }

Thanks, Arun

answered Mar 28 '17 at 10:58

Arun venkitachalam

21
1

score 0 · Answer 3 · edited May 19 '21 at 09:21

0

Try this

.navbar-default .navbar-toggle .icon-bar {
        background-color: #ffffff !important;
}

edited May 19 '21 at 09:21

SwissCodeMen

4,222
8
24
34

answered Mar 28 '17 at 10:30

Rajesh Karunakaran

169
6

Please refer here: http://stackoverflow.com/questions/20540563/change-icon-bar-color-in-bootstrap – Rajesh Karunakaran Mar 28 '17 at 10:38

Prasath V · Answer 4 · 2017-03-28T10:42:46.880

0

Change this into your code.

HTML

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

CSS

.navbar .navbar-toggler .icon-bar {
    color: #fff !important;
}

edited Mar 28 '17 at 10:42

answered Mar 28 '17 at 10:34

Prasath V

1,336
4
20
39

which classes should i pass in CSS, there is no class with .navbar-default – swapnil saraf Mar 28 '17 at 10:39
You should pass `.navbar` or `.navbar-light` class instead of `navbar-default` class. Forget to change in answer. Will update.. – Prasath V Mar 28 '17 at 10:42

score 0 · Answer 5 · answered Mar 28 '17 at 10:38

i have changed the color to red. Try this, u can change the color that you want

  .navbar-inverse .navbar-toggle .icon-bar {
    background-color: red !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
  
<div class="container">
  <h3>Collapsible Navbar</h3>
  <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
  <p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>

</body>
</html>

score 0 · Answer 6 · answered Aug 16 '17 at 15:05

First, you need to find out exactly what the specific CSS selector path is for the icon-bar in your particular version of Bootstrap. I find the most reliable way to do this is to use Developer Tools console. For example, in Chrome, right click on the icon and select inspect.

This will bring you to roughly where the icon-bar spans are in the html and you should see something like .navbar-default .navbar-toggle .icon-bar with a single background-color rule on it like in the screenshot below.

COOL TIP: You can click on the small color box of the background-color rule to change the icon-bar color directly on the page.

From there it should be a case of simply copying the CSS straight from Dev Tools window, pasting it into your custom CSS file and adjusting the color to taste.

Hope that helps!

Change the color of bootstrap icon bar in navbar

6 Answers6