Rachel Addleman Rachel Addleman - 2 years ago 60
HTML Question

Difficulty getting navbar to work

I'm working on a navbar using Bootstrap and I'm having trouble getting the dropdown menu to work. I'm using JSFiddle to test it out

https://jsfiddle.net/addlemanrachel/n9m8fjm8/#&togetherjs=nhtT9oahiE edit: wrong link! Correct link is: https://jsfiddle.net/addlemanrachel/n9m8fjm8/.

Here is the HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="#"><i class="fa fa-home"></i></a></li>
<li class="dropdown active">
<a href='#' class="dropdown-toggle" data-toggle="dropdown">Community</a>
<ul class="dropdown-menu">
<li><a href="#">Recent Activity</a></li>
<li><a href="#">Member Activity</a></li>
<li><a href="#">Member List</a></li>
<li><a href="#">Member Groups</a></li>
<li><a href="#">Pet Help</a></li>
<li><a href="#">Pets for Sale</a></li>
<li><a href="#">Pet Services</a></li>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

At first I thought my issue was not linking jQuery but after doing that I still can't get it to work. Thanks in advance for helping! I'm so new at this and just not sure what I'm doing wrong.

Answer Source

Opening your jsFiddle you can see you get the following error:

bootstrap.min.js:6 Uncaught ReferenceError: jQuery is not defined

You get that error because jQuery is a Bootstrap dependency, so you have to make sure you are loading it correctly.

Including jQuery v2.2.3 in the jsfiddle you provided it now works

Working fiddle



If you need to load Bootstrap and jQuery in your html page, not in jsfiddle you have to link the corresponding resources inside your tag in your html page.

For example, using MaxCDN links you can use the following code:

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

 <!-- html code ...-->

IMPORTANT: Make sure you include the js files in that exact order, jQuery first then Bootstrap.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download