PS97 PS97 - 2 months ago 14
CSS Question

Why Bootstrap Navbar not collapsing?

I'm pretty much using the exact W3schools example for collapsing

navbars
, and it isn't working. I'm sure I'm overlooking something but can't seem to pin point it. Attached is my HTML code. Cheers!



<script type="text/javascript" src="assets/js/modernizr.min.js"></script>
<script type="text/javascript" >
openTab("Home")

function openTab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
</script>







<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" onclick="openTab('Home')">Home</a></li>
<li><a href="#" onclick="openTab('About')">About Us</a></li>
<li><a href="#" onclick="openTab('Products')">Products</a></li>
<li><a href="#" onclick="openTab('Contact')">Contact Us</a></li>
</ul>
</div>
</div>
</nav>




Answer

The code snippet that you have provided is correct. The main reason behind the issue will be the missing of bootstrap or jQuery files. Please include the below lines and please run again the code.

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>