Question posted in 
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.
2
Answers
First of, try with the latest version of bootstrap instead, go check out https://getbootstrap.com/docs/4.1/components/navbar/ …
Otherwise, check the console for errors..