PS97 PS97 - 1 year ago 69
CSS Question

Why Bootstrap Navbar not collapsing?

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

, 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" >

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";

<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>
<a class="navbar-brand" href="#">Company Name</a>
<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>

Answer Source

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.

    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download