CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
swapnil saraf
swapnil saraf

Reputation: 73

Change the color of bootstrap icon bar in navbar

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

Upvotes: 3

Views: 23888

Answers (6)

Rajesh Karunakaran
Rajesh Karunakaran

Reputation: 169

Try this

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

Upvotes: 0

Sahil Dhir
Sahil Dhir

Reputation: 4250

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>

Upvotes: 2

mikeym
mikeym

Reputation: 6311

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.

enter image description here

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!

Upvotes: 0

Arun venkitachalam
Arun venkitachalam

Reputation: 21

I have noticed out two issue here

  1. In style.css

Replace !importtant with !important

  1. use css classs like this way

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

Thanks, Arun

Upvotes: 2

Prasath V
Prasath V

Reputation: 1356

Change this into your code.

HTML

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

CSS

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

Upvotes: 0

Ganesh Putta
Ganesh Putta

Reputation: 2671

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>

Upvotes: 0

Related Questions