Bootstrap toggle button is not working

Question

The toggle button is not working to reveal the collapsed elements and I do not know why. When the window is resized the toggle button is displayed but upon pressing, nothing happens. This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes. Any help is appreciated.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container"></div>

      <li>
        <a class="logo" href="#1"></a>
      </li>
      <li>
        <a class="cart" href="#7"></a>
      </li>

      <button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse navHeaderCollapse">

        <ul>

          <li class="products"><a href="#2">Products</a>
          </li>
          <li class="store"><a href="#3">Store</a>
          </li>
          <li class="about"><a href="#4">About Us</a>
          </li>
          <li class="discover"><a href="#5">Discover</a>
          </li>
          <li class="support"><a href="#6">Support</a>
          </li>

        </ul>

      </div>

    </div>
  </div>
</div>

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

Answer 1

You have at least a few problems: See the docs for the Navbar.

data-toggle="dropdown" should be data-toggle="collapse"

data-target="navHeaderCollapse" should be data-target=".navHeaderCollapse"

Fixing these two issues should allow the menu to open and close. You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the navbar-header class as well as the .nav & .navbar-nav classes on your menu list items. Also your container isn't doing anything currently, it should surround the navbar-header / list items.

Working Example:

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

<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a href="#" class="navbar-brand">LOGO</a>
          <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-shopping-cart"></span></a>
        </div>

        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li class="products"><a href="#2">Products</a>
            </li>
            <li class="store"><a href="#3">Store</a>
            </li>
            <li class="about"><a href="#4">About Us</a>
            </li>
            <li class="discover"><a href="#5">Discover</a>
            </li>
            <li class="support"><a href="#6">Support</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

  </div>
</div>


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

Answer 2

The reason that your navbar toggle button isn't working is that you've missed 3 things.

1. You need to change data-toggle="dropdown" to data-toggle="collapse".

2. You need to change data-target="navHeaderCollapse" to data-target="#navHeaderCollapse".

3. You need to add id="navHeaderCollapse" to the div with the collapse css class.

Once you have all these elements the toggle will work. There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first <li> elements not being within an <ul> tag.

Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/