CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

Javascript/Navbar Dropdown Not Working With Twitter Bootstrap

I'm trying to use the latest version of twitter bootstrap to create a navigation menu with dropdown links.

However, the dropdown doesn't work, and the collapsed navbar doesn't go back up.

I'm assuming something in the javascript doesn't work, but I've double checked my hotlinks and they're all up and working.

Here's what I have in my head: 

    <!-- Le Javascript -->

<!-- Google Libraries for Charts and jquery -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript for Bootstrap-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<!-- sharethis javascript -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "be79498d-c866-4538-945f-677020fd645d", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

<!-- Pesonal javascript files -->
<script src="../js/interactions.js"></script>
<script src="../js/data-model.js"></script>
<script src="../js/charts.js"></script>

<!-- Le CSS -->

<!-- Latest compiled and minified CSS for bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.4/yeti/bootstrap.min.css" rel="stylesheet">

<!-- Personal Style Sheet -->
<link rel="stylesheet" href="../css/calculator.css">

I don't see any issues with this.

Here's the html for the nav. It was copied and pasted from the bootstrap source docs.

<nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <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="http://www.healthkismet.com">Health Kismet</a>
        </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav">
                <li class="active"><a href="http://www.healthkismet.com/formula-analyzer/">Formula Analyzer <span class="sr-only">(current)</span></a></li>
                <li><a href="http://www.healthkismet.com/formula-analyzer/how-to-use/">How To Use</a></li>
                <li><a href="#">Suppliers</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Help <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Contact/FAQ</a></li>
                    <li><a href="http://forums.healthkismet.com">Forums</a></li>
                  </ul>
                </li>
                <li><a href="http://blog.healthkismet.com/starting-supplement-business">Get Help With Your Formula</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Blog <span class="caret"></span></a>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="http://blog.healthkismet.com">Company Blog</a></li>
                    <li><a href="http://blog.healthkismet.com/topics/entrepreneurship">Entrepreneurship Articles</a></li>
                  </ul>
                </li>
              </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

Not sure if it's something wrong with the bootstrap or if there's possible interference from other javascript files.

You can view the whole page here: www.healthkismet.com/formula-analyzer/

Upvotes: 0

Views: 620

Answers (1)

AngularJR
AngularJR

Reputation: 2762

You have many of the same JS scripts and new and old versions.

Please put all of these JS scripts below at the end of your page.

<!-- Le Javascript -->

<!-- Google Libraries for Charts and jquery -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>


<!-- Le Javascript -->

<!-- Google Libraries for Charts and jquery -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript for Bootstrap-->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">   </script>

<!-- sharethis javascript -->
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "be79498d-c866-4538-945f-677020fd645d", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

<!-- Pesonal javascript files -->
<script src="../js/interactions.js"></script>
<script src="../js/data-model.js"></script>
<script src="../js/charts.js"></script>

And only use one css CDN link. Also when using Bootstrap and custom css, the placement of your CSS can take priority over another in the order they get read in your page.

It will now works if you just use the JS scripts above.

Upvotes: 1

Related Questions