Reputation: 21
I've been messing around with my website for a while now and can't seem to get the dropdown on my navigation to actually drop down. I've read a few questions regarding this and couldn't find something that was this specific.
I have my .js file installed and everything is linked up (as far as I know)
<script src="/js/bootstrap.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="bootstrapindex.html">Student Food</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="bootstrapindex.html">Home</a></li>
**<li><a href="about.html">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Recipes<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Featured</a></li>
<li><a href="about.html">Latest</a></li>
<li><a href="about.html">Something else here</a></li>**
</ul>
</li>
</ul>
Can't seem to see why this won't work. If anyone could help that would be amazing.
Upvotes: 2
Views: 4403
Reputation: 8242
You're including the Bootstrap JavaScript twice.
Remove one of the following lines:
<script src="/js/bootstrap.js" type="text/javascript"></script>
<script src="/js/bootstrap.min.js" type="text/javascript"></script>
bootstrap.min.js
is just a minified version of bootstrap.js
; it's the same code.
Upvotes: 2
Reputation: 1443
Try to remove wrapping div <div class="nav-collapse collapse">
. I think, dropdown could be hidden by overflow (it was hidden, when I copy-pasted your code snippet).
Upvotes: 0