My navigation bar is functioning properly, except for when I try to collapse it. It shows everything, including the button, but doesn't display the menu items. I am using Bootstrap 3.3.6 and I'm not sure why this issue is occurring.
<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="#mainNavBar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Welcome</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a> </li>
<li><a href="#">About</a> </li>
<li><a href="#">Contact</a> </li>
</ul>
</div><!--/.nav-collapse -->
</div>