Bootstrap hamburger not showing list element after toggle

I’m trying to incorporate Bootstrap’s hamburger menu on a page, but cannot seem to get the list elements to display after toggle.

The menu loads fine on desktop and does hide the links, displaying the hamburger. But, on click of the hamburger icon, nothing occurs?

Sample:

ul {
  list-style-type: none;
}

li {
  padding: 0px 30px;
}
<!-- BOOTSTRAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="navbar navbar_container">
  <div class="navbar_container-wrapper">

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

      <div class="navbar_wrapper-list container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger">
            <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="collapse navbar-collapse" id="hamburger">

          <ul class="navbar_wrapper-ul navbar-nav mr-auto">
            <li id="list-item-1" class="navbar_wrapper-li active nav-item"><a class="active" href="#">Home</a></li>
            <li id="list-item-2" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Blog</a></li>
            <li id="list-item-3" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Portfolio</a></li>
            <li id="list-item-4" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Contact</a></li>
          </ul>

        </div>
      </div>
      <!-- .navbar_wrapper-list end -->
    </nav>
  </div>
  <!-- .navbar_container-wrapper end -->
</div>
<!-- .navbar-container end-->

My approach has been adopted by this CodePen.

Answer

Actually you need to add “jquery.min.js” before “bootstrap.min.js”. Because “bootstrap.min.js” depends on “jquery.min.js”

ul {
  list-style-type: none;
}

li {
  padding: 0px 30px;
}
<!-- BOOTSTRAP -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">



<div class="navbar navbar_container">
  <div class="navbar_container-wrapper">

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

      <div class="navbar_wrapper-list container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#hamburger">
            <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="collapse navbar-collapse" id="hamburger">

          <ul class="navbar_wrapper-ul navbar-nav mr-auto">
            <li id="list-item-1" class="navbar_wrapper-li active nav-item"><a class="active" href="#">Home</a></li>
            <li id="list-item-2" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Blog</a></li>
            <li id="list-item-3" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Portfolio</a></li>
            <li id="list-item-4" class="navbar_wrapper-li nav-item"><a class="nav-link" href="#">Contact</a></li>
          </ul>

        </div>
      </div>
      <!-- .navbar_wrapper-list end -->
    </nav>
  </div>
  <!-- .navbar_container-wrapper end -->
</div>
<!-- .navbar-container end-->

Leave a Reply

Your email address will not be published. Required fields are marked *