I recently started learning and using Bootstrap 3. I figured I would start with something simple- a header and a dropdown bar. I used the code from the Bootstrap website.
I started out with the basic Bootstrap template, then added the bootstrap navbar. This is my code so far.
<!DOCTYPE html>
<html>
<head>
<title>WEBSITE NAME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>WEBSITE NAME</h1>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Software</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="/"><span class="glyphicon glyphicon-ment"></span> Twitter</a></li>
<li><a href="/"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery/jquery.js"></script>
<!-- Include all piled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The dropdown menu is absolutely not working at all- hovering or clicking it. What do I need to do?
EDIT: I used the Safari web inspector and the resource "jquery.js" is red (indicating it is missing). This es from the lines: I am writing this based off the default basic page from the Bootstrap site. I'm not sure what to change the path to in order to correct it. There is no 'jquery.js' file in the project folder provided.
I recently started learning and using Bootstrap 3. I figured I would start with something simple- a header and a dropdown bar. I used the code from the Bootstrap website.
I started out with the basic Bootstrap template, then added the bootstrap navbar. This is my code so far.
<!DOCTYPE html>
<html>
<head>
<title>WEBSITE NAME</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>WEBSITE NAME</h1>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Software</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></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><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="https://twitter./"><span class="glyphicon glyphicon-ment"></span> Twitter</a></li>
<li><a href="https://youtube./"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery./jquery.js"></script>
<!-- Include all piled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The dropdown menu is absolutely not working at all- hovering or clicking it. What do I need to do?
EDIT: I used the Safari web inspector and the resource "jquery.js" is red (indicating it is missing). This es from the lines: I am writing this based off the default basic page from the Bootstrap site. I'm not sure what to change the path to in order to correct it. There is no 'jquery.js' file in the project folder provided.
Share Improve this question edited Oct 21, 2013 at 22:31 asked Oct 20, 2013 at 21:51 user2333842user2333842 1- There are a lot of changes between Bootstrap and Bootstrap 3(.2.3). Always check if the classes are included in your css-file. Not sure if this is the case right now, but it might be worth checking – BlueCacti Commented Oct 21, 2013 at 22:38
4 Answers
Reset to default 1Success!
I noticed that the 'code.jquery./jquery.js' file was unreachable in the Safari web inspector. The issue was this line:
<script src="//code.jquery./jquery.js"></script>
The file could not be reached. For some reason, the http: part was missing. Changing the code to
<script src="http://code.jquery./jquery.js"></script>
fixed the issue! Huzzah!
Additional Note: It think that, if this were run online and not locally, the http: part would not be required.
I ran your code after taking out the "html5shiv" and "respond.min" references and the dropdown menu works fine. I suspect the jQuery and Bootstrap JS files may have their file paths stated incorrectly.
the section:-
<ul class="nav navbar-nav navbar-right">
<li><a href="https://twitter./"><span class="glyphicon glyphicon-ment"></span> Twitter</a></li>
<li><a href="https://youtube./"><span class="glyphicon glyphicon-facetime-video"></span> YouTube</a></li>
</ul>
</li>
</ul>
has an extra </ul> and </li> - which is probably not causing your problem, but won't be helping...
I loaded this exact file onto my WAMP server locally and everything worked perfectly fine: You might want to change this at the bottom of the page: src="http://code.jquery./jquery.js" There is nothing wrong with your code and the HTML5 shiv and respond.js has nothing to do with your menu not working...
You might however want to use Google Chrome and use the inspect element to make sure your reference points are correct.
Hover doesn't work out of the box in BS3, you can use a custom javascript to get that working... I use it here: http://thisamericanjourney./ hover over the about menu item: //This allows the user to hover over the menu without clicking on it
$(function() {
$('ul.nav li.dropdown').hover(function() {
$('.dropdown-menu', this).fadeIn('fast');
}, function() {
$('.dropdown-menu', this).fadeOut('fast');
});
});