Marcus Pro Marcus Pro - 1 month ago 8
HTML Question

Bootstrap navbar wont collapse

My bootstrap navbar that i got from the bootstrap jumbotron example won't collapse. If it is that i dont have the right javascript, css or Jquery links pls send me the right ones. I am kinda new to the navbar thing so i really need some help. Thank you!
Here is my code:

<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav-collapse" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="./">Static top <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>

Answer

Your code seems to work properly for me. That just indicates you're missing some JavaScript files. To be more precisely, you are missing Bootstrap and jQuery JS files. Inside your <body>, just add both files.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Keep in mind to include jQuery first, otherwise Bootstrap won't work (Bootstrap simply requires jQuery, that's all).

Here's your code, working. I've just copied your markup and added Bootstrap + jQuery.

EDIT

I didn't notice you've been using the wront data-target. Thanks to @Asifuzzaman Redoy. Just change your data-target to the following:

data-target=".navbar-collapse"

I've updated my fiddle accordingly.