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: / 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=";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=".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?
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/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./coop/cse/brand?form=cse-search-box&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./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?
Share Improve this question asked Jul 6, 2012 at 3:13 clifgrayclifgray 4,42911 gold badges68 silver badges125 bronze badges1 Answer
Reset to default 7The 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./ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.js"></script>