ron tornambe ron tornambe - 7 months ago 13
HTML Question

Why doesn't bootstrap nav-bar open on small screens?

This nav-bar works fine when the screen is larger than 640, but when the menu-button is displayed on small screens, clicking it does not show menu items. Here is the site. Thanks for your time.

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#BHC-Navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Bunker Hill</a>
</div>
<div class="collapse navbar-collapse" id="BHC-Navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><i class="glyphicon glyphicon-home"></i> Home</a></li>
<li><a href="#services" class="glyphicon glyphicon-info-sign"> Services</a></li>
<li><a href="#clients" class="glyphicon glyphicon-info-sign"> Clients</a></li>
<li><a href="#about" class="glyphicon glyphicon-info-sign"> About</a></li>
<li><a href="#contact"><i class="glyphicon glyphicon-envelope"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>

Answer

you are missing the bootstrap.min.js so you need to add something like this:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Edit

You need to add jQuery library before loading this js file. I'm not sure when using angular.js

Comments