Twitter Bootstrap Dropdown Not Working When Clicked

Question

Trying to figure out why the dropdown menu isn't working on a link. A link to the webpage is http://nathanielmignotte.ca/Work/EMO/beprepared.html.

  <!-- Navbar -->
  <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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>
            </button>
            <a class="navbar-brand" href="#"> </a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="index.html">Ministry Home</a></li>
              <li><a href="newsroom.html">Newsroom</a></li>
              <li><a href="ministry.html">About The Ministry</a></li>
              <li class="dropdown active">

This is were I implemented the dropdown menu on the Be Prepared Link

                <a class="dropdown-toggle" data-toggle="dropdown" href="beprepared.html">
                  Be Prepared 
                </a>
                <ul class="dropdown-menu">
                  <li><a href="#">Outdoor</a></li>
                  <li><a href="#">Seasonal</a></li>
                  <li><a href="#">Electronic</a></li>
                  <li class="divider">Outdoor</li>
                  <li><a href="#">Sale Items</a></li>
                </ul>
              </li>
              <li><a href="contact.html">Contact Us</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right hideBtn">
              <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>
          </div>
        </div>
  </div>
  <!-- End Nav Bar -->

Answer 1

Having looked at http://nathanielmignotte.ca/Work/EMO/beprepared.html, the first thing you need to do is look at your script files:

<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>

You're loading jQuery 1.10.2, then you're loading Bootstrap.js. So far, so good.

Then you're loading Boostrap.min.js, which is a minified version of the same JS file you've already loaded. This will cause conflicts. Remove the <script src="js/bootstrap.js"></script> line, so you only get the minified version.

Finally, you're loading in a minified version of jQuery (jquery.min.js). Loading this after the other scripts will likely cause issues with the jQuery scripts that have already run (scripts are run in the order that they're loaded). What's more, it's not even the same version of jQuery, so it will definitely cause problems. So remove the <script src="js/jquery.min.js"></script> line entirely.

You should end up with this:

<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>

Better now?