CDuck CDuck - 5 months ago 17
jQuery Question

Bootstrap 3 Navbar Not Expanding

I am using Twitter Bootstrap 3 to make my webpage scale to any screen size and the navbar is not expanding when the trigger button is pressed.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS: Bootstrap 3 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript:Bootstrap 3 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

<meta charset="utf-8">
<title>Webpage</title>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Webpage</a>
<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" aria-expanded="false" aria-controls="navbar3">
<span class="sr-only">Toggle nav</span>
<span class="glyphicon glyphicon-plus-sign"></span>
</button>
</div>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="active"><a href="/p1">Page1</a></li>
<li><a href="/p2">Page2</a></li>
<li><a href="/p3">Page3</a></li>
</ul>
</div>
</nav>

<div id="content">

</div>
</body>
</html>


What is going wrong and how can I fix it?

Answer

jQuery needs to load first so it's dependencies can used the library. Since bootstrap.min.js is jQuery dependant, you should load it AFTER jQuery is loaded.

Just move your jQuery file jquery.min.js before your bootstrap js file bootstrap.min.js and your navbar should work fine.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>
 <!-- Latest compiled and minified JavaScript:Bootstrap 3 -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Comments