Bootstrap 3 Navbar - Doesn't collapse properly - css

Question

The navbar worked properly once but i made some changes and it no longer works. When I make the window small the toggle square shows up but when i click on it - nothing happens.
Note: The navbar works fine in full screen - its just in small windows, when I click on the toggle button - the drop down menu doesn't appear
Was wondering if anyone knew how to fix it.
Here is my code for the header :
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">CHRONOS LOGO</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">SOCIAL<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="divider"></li>
<li>Google+</li>
<li class="divider"></li>
<li>Facebook</li>
<li class="divider"></li>
<li>Twitter</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
FOOTER:
<button type="submit" name="submit" id="submit"
class="btn btn-primary btn-lg">
Submit
</button>
</form>
</div>
<?php } ?>
</div>
<div id="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="regform/js/jquery.validate.js"></script>
<script src="regform/script.js"></script>
<script>
addEventListener('load', prettyPrint, false);
$(document).ready(function() {
$('pre').addClass('prettyprint linenums');
});
</script>
</body>
</html>

Answer 1

You have the wrong value on the data-target attribute; it should instead be:
<button
type="button"
class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse"> <!-- You had ID from the docs example -->
</button>
http://jsfiddle.net/fZTgH/1/

Answer 2

This is most likely a js problem as the code looks fine. Make sure that you have the bootstrap.min.js file in the header or at the bottom of the js header stack (under all the other js files).
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="OTHER JS FILES"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
For a further inspection, please update your question with the header code or a link to the site