Change Icon-Bar (☰) Color in Bootstrap

Change icon-bar (☰) color in bootstrap

The reason your CSS isn't working is because of specificity. The Bootstrap selector has a higher specificity than yours, so your style is completely ignored.

Bootstrap styles this with the selector: .navbar-default .navbar-toggle .icon-bar. This selector has a B specificity value of 3, whereas yours only has a B specificity value of 1.

Therefore, to override this, simply use the same selector in your CSS (assuming your CSS is included after Bootstrap's):

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}

Change the color of bootstrap icon bar in navbar

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>

Can I add color to bootstrap icons only using CSS?

Yes, if you use Font Awesome with Bootstrap! The icons are slightly different, but there are more of them, they look great at any size, and you can change the colors of them.

Basically the icons are fonts and you can change the color of them just with the CSS color property. Integration instructions are at the bottom of the page in the provided link.

Edit: Bootstrap 3.0.0 icons are now fonts!

As some other people have also mentioned with the release of Bootstrap 3.0.0, the default icon glyphs are now fonts like Font Awesome, and the color can be changed simply by changing the color CSS property. Changing the size can be done via font-size property.

horizontal bars icon like twitter bootstrap

An alternative is to use the triple bar Unicode character - ☰ (U+2630). It's also available in lots of different icon fonts which fix cross-browser differences, like Font Awesome or Entypo.

Coloring a bootstrap menu and making it active

This is the CSS use for an active state: See working example.

.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #8AC007;
  color: #FFF;
}

.navbar.navbar-inverse .navbar-nav > li > a {

  font-family: sans-serif;

  color: #ffffff;

  /* PavanD: This is the color of the elements when they load. */

}

.navbar.navbar-inverse .navbar-nav > li > a:hover,

.navbar.navbar-inverse .navbar-nav > li > a:focus {

  background-color: #000000;

  /* PavanD: When you click the top menu items, they have to be rendered in black.*/

  color: #ffffff;

  /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/

}

.navbar.navbar-inverse .navbar-nav > li > a:active {

  background-color: #8AC007;

  color: #ffffff;

}

/***Link Background and Color Active State***/

.navbar.navbar-inverse .navbar-nav > .active,

.navbar.navbar-inverse .navbar-nav > .active > a,

.navbar.navbar-inverse .navbar-nav > .active > a:hover,

.navbar.navbar-inverse .navbar-nav > .active > a:focus {

  background-color: #8AC007;

  color: #FFF;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-inverse navbar-static-top">

  <!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->

  <div class="container-fluid" style="background-color:#5F5F5F;">

    <!--505050 can also be considered -->

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

    </div>

    <div id=headerEntries class="collapse navbar-collapse" id="myNavbar">

      <ul class="nav navbar-nav">

        <li class="active"><a href="index.html"><span class="glyphicon glyphicon-home"></span></a>

        </li>

        <li><a href="#">CONCEPTS</a>

        </li>

        <li><a href="#">C</a>

        </li>

        <li><a href="#">C++</a>

        </li>

        <li><a href="#">JAVA</a>

        </li>

        <li><a href="#">ORACLE</a>

        </li>

        <li><a href="#">FAQs</a>

        </li>

        <li><a href="#">REACH US</a>

        </li>

        <li><a href="about.html">ABOUT</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>

How do I customize this navigation button icon?

You just need to style it.

.icon-bar {

  font-size: 20px;

  padding: 7px 10px;

  width: 20px;

  border: 1px solid white;

  color: white;

  border-radius: 3px;

}

body {

  background: teal;

}

<div class="icon-bar">☰</div>

How can I create a navbar-collapse that doesn't take up the whole screen?

I have posted a partial answer to this question in answer to a more specific question about moving items over to the right side: Boostrap 4 Navbar Collapse Menu Right Align

Since I asked this question I updated Bootstrap. In v4 the collapsible menu for nav-navbar still looks like this. But for nav it gives me things together in a single row, so the width is somewhat more filled. I've decided this is acceptable.

To truly not take up the whole screen width, I believe one needs to use a dropdown of some kind.

Bootstrap navbar-toggle hamburger icon with label

The trick was setting line-height of the parent element to 0.
When an element is changed from inline to block or inline-block, line-height is added to it. This is explained here:
Why does inline-block cause this div to have height?

So, setting the line-height of the button element to 0 solved my issue:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#something" style="line-height: 0px;">
   <span style="display: inline-block;">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
  </span>
  <!-- Any other code (eg: label) that you want inline -->
</button>

How I am struggling to have my fixed sidebar menu on desktop/laptop to switch into hamburger menu on mobile / tablets

You just need to set the values you are changing (width, margin-left, etc.) when toggling the menu via JS to be present and then change them to what you originally had using that media query. Additionally, you might want to hide and show the toggle buttons.

Here's an approach:

body {

  font-family: "Lato", sans-serif;

}

.sidebar {

  height: 100%;

  width: 250px;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  background-color: #111;

  overflow-x: hidden;

  transition: 0.5s;

  padding-top: 60px;

}

.sidebar a {

  padding: 9px 8px 8px 32px;

  text-decoration: none;

  font-size: 25px;

  color: #818181;

  display: block;

  transition: 0.3s;

}

.sidebar a:hover {

  color: #f1f1f1;

}

.sidebar .closebtn {

  position: absolute;

  top: 0;

  right: 25px;

  font-size: 36px;

  margin-left: 50px;

  display: none;

}

.openbtn {

  font-size: 20px;

  cursor: pointer;

  background-color: #111;

  color: white;

  padding: 10px 15px;

  border: none;

  display: none;

}

.openbtn:hover {

  background-color: #444;

}

#main {

  transition: margin-left .5s;

  padding: 16px;

  margin-left: 250px;

}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {

  .sidebar {

    padding-top: 15px;

    width: 0;

  }

  .sidebar a {

    font-size: 18px;

  }

  .openbtn {

    display: block;

  }

  .sidebar .closebtn {

    display: block;

  }

  #main {

    margin-left: 0;

  }

}

<!DOCTYPE html>

<html>

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <div id="mySidebar" class="sidebar">

    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>

    <a href="#">About</a>

    <a href="#">Services</a>

    <a href="#">Clients</a>

    <a href="#">Contact</a>

  </div>

  <div id="main">

    <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>

    <h2>Collapsed Sidebar</h2>

    <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>

  </div>

  <script>

    function openNav() {

      document.getElementById("mySidebar").style.width = "250px";

      document.getElementById("main").style.marginLeft = "250px";

    }

    function closeNav() {

      document.getElementById("mySidebar").style.width = "0";

      document.getElementById("main").style.marginLeft = "0";

    }

  </script>

</body>

</html>

Change Icon-Bar (☰) Color in Bootstrap