Question

I am using twitter bootstrap on my web app to do all of the styling and everything is great for the most part. The problem is that my nav bar, once collapsed, will not drop down when I click the dropdown icon. I have listed my HTML but I think the problem is with my javascript seeing as this fiddle with the exact same code: http://jsfiddle.net/YWUmb/30/ works just fine.

<div class="navbar 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="/">Exployre</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="/">Home</a></li>
              <li><a href="/profile">Profile</a></li>
              <li><a href="/sponsors">Sponsors</a></li>
              <li><a href="/working">Exployrers</a></li>
              <li><a href="/about">About</a></li>
              <li><a href="/share">Share</a></li>
              <li>
                    {% if user %}
                        User:  {{ user }}<br>
                        <a href="{{ logout }}">Logout</a>
                    {% else %}
                        <a href="/login">Signin or Register</a>
                    {% endif %}
              <li>  
                    <a href="/profile">
                    {% if visits %}
                        {% if visits > 10 %}
                        Prestige: {{ visits }}
                        {% elif visits > 5 %}

                        {% endif %}
                    {% endif %}
                    </a>
              </li>
              <li>        
                <form action="/search" class="navbar-search">
                  <div>
                    <input type="text" placeholder="Search" class="search-query" name="q" size="55"/>
                  </div>
                </form>

                <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>
              </li>

            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
<script type="text/javascript" src="/static/js/bootstrap.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Is there anything wrong with my source code links or anything additional that I need to do to make it work?

Answer 1

The problem is with the order of your js. The jQuery script goes first, bootstrap plugins go after:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.js"></script>