Irv Irv - 1 year ago 76
HTML Question

My navbar toggle does not collapse

I am trying to redo my personal page and I am having problems with the Navbar. when I first made it I didn't have one, now I am trying to add one and change the entire layout. I have the nabber up and everything is in place, now when the icons show up when the screen is small, it does not collapse. I followed the instructions with bootstrap and I am trying to be more proficient in it but I can't seem to find why it does not work. My code is in codepen.io

<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">PORTFOLIO</a>
</div>

<div class="collapse navbar-collapse pull-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#slide2">Home <span class="sr-only"></span></a></li>
<li><a href="#slide2">About</a></li>
<li><a href="#slide3">Projects</a></li>
<li><a href="#slide4">Contact</a></li>
</ul>
</div>

</div>
</nav>



Answer Source

Your code is perfectly fine. The only thing that you did wrong was to include Bootstrap before jQuery.

This is a working fork of your code in which I changed the order to include jQuery first. You can change the order by checking the settings of your pen where you've included external resources (CSS or JS).

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download