twitter bootstrap collapsable nav menu

Posted by clifgray on Stack Overflow See other posts from Stack Overflow or by clifgray
Published on 2012-07-06T03:13:08Z Indexed on 2012/07/06 3:15 UTC
Read the original article Hit count: 371

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery