Navbar won't dropdown menu after collapse using bootstrap
Question
I can't seem to figure out why my top right button "Menu" won't trigger the dropdown. Can anyone point out what's wrong? When I click it nothing happens, but "Home" should dropdown.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Store</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<a href = "#" class ="navbar-brand">Site</a>
<button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse">
Menu
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
</ul>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
3 answers
solution1
0 2016-01-26 21:15:21
You need to load the jquery javascript library before you load bootstraps javascript library. Bootstrap runs off of jquery and will not work without loading it first so before the bootstrap.js add a link to jquery it should look like the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Also if you want your navbar to work correctly you should encase your navbar brand and menu button in the class of navbar-header. If you want your menu to show in the navbar at mobile widths you can leave it like it is.
Here is a working codepen Codepen
solution2
0 2016-01-26 21:16:03
Check this fiddle : fiddle
The navbar looks fine on larger screens but when the screen size is reduced, the Menu option appears which when clicked shows the Home option in the navigation.
The only problem with your code was that you hadn't called the jquery library. which is required in order to run the bootstrap javascript.
You only need to add this script tag in the head of your html before you call the bootstrap javascript.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
solution3
0 2016-01-26 21:39:49
These 2 files are missing. You need to include them.
<!-- 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 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Without these files, it won't work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.