Bootstrap hamburger menu is in page but not visible

Question

I'm working on a left navbar for Bootstrap, and it is working fine except for one little thing that is driving me crazy.

The hamburger menu is in the page for narrower screens but it is not visible. I know it is there because I can click on it and it works and I can see it when I inspect the element in Chrome.

I've included a minimal snippet. Click where the hamburger menu is supposed to be and you will see the menu expand. Can you make the hamburger menu show itself?

.navbar-left {
  overflow: auto;
  font-weight: 200;
  color: #fff;
  background-color: #3d486f;
  position: fixed;
  top: 0px;
  width: 250px;
  height: 100%;
}
.navbar-left a { color: #fff; }
.navbar-left-header { margin: 15px 0; }
.navbar-left ul, .navbar-left li { list-style: none; }
.navbar-clear { clear: left; }
@media (max-width: 767px) {
  .navbar-left {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .navbar-left .navbar-toggle { display: block; }
}
@media (min-width: 768px) {
  #menu-content { display: block; }
  .navbar-left .navbar-toggle { display: none; }
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="navbar-left">

<div class="navbar-left-header">
Title
<button type="button" data-toggle="collapse" data-target="#menu-content" aria-expanded="false" aria-controls="navbar" class="collapsed navbar-toggle">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>
</div>
<div class="navbar-clear"></div>

<ul id="menu-content" class="collapse">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
</ul>
</div>

</div>

Answer 1

In my case, I forgot to add to :

put this in the head tag :
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

and this right below the closing body tag :

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Answer 2

You just need to add a background color to icon-bar, since it will inherit from the parent:

.navbar-toggle{
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
}

so add this:

.navbar-toggle .icon-bar {
    background-color: #fff;
}

But the simplest way to get it right, it's adding navbar-default class to your navbar, so bootstrap will apply the defaults to the .icon-bar, and then you can extend it.

I would advice to check the bootstrap documentation for navbar properly, or check this example:

https://getbootstrap.com/examples/navbar/

Answer 3

Add a background-color on .icon-bar should do the trick.

    .navbar-toggle .icon-bar{background-color:white;}
    .navbar-left {
      overflow: auto;
      font-weight: 200;
      color: #fff;
      background-color: #3d486f;
      position: fixed;
      top: 0px;
      width: 250px;
      height: 100%;
    }
    .navbar-left a { color: #fff; }
    .navbar-left-header { margin: 15px 0; }
    .navbar-left ul, .navbar-left li { list-style: none; }
    .navbar-clear { clear: left; }
    @media (max-width: 767px) {
      .navbar-left {
        position: relative;
        width: 100%;
        margin-bottom: 10px;
      }
      .navbar-left .navbar-toggle { display: block; }
    }
    @media (min-width: 768px) {
      #menu-content { display: block; }
      .navbar-left .navbar-toggle { display: none; }
    }
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <div class="navbar-left">

    <div class="navbar-left-header">
    Title
    <button type="button" data-toggle="collapse" data-target="#menu-content" aria-expanded="false" aria-controls="navbar" class="collapsed navbar-toggle">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    </div>
    <div class="navbar-clear"></div>

    <ul id="menu-content" class="collapse">
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
    </div>

        </div>
    
    

Answer 4

Simply add a background color to .icon-bar

.navbar-toggle .icon-bar {
    background-color: #fff;
}