CODEWITHSUNDEEP
twitter-bootstrap
user1941427
user1941427

Reputation: 41

Bootstrap collapse menu not working

I am new at this and I am trying to create a collapse navbar, I managed to show the btn-navbar but when I click it, nothing happens. This is my head code:

<script type="text/javascript" src="/resources/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/resources/bootstrap/bootstrap.min.js"></script>

and this is my navbar code:


                  <!-- por si el dispositivo que esta visualizando es de resolucion pequenya, se colapsara y lo que hay dentro del elemento nav-collapse collapse sera lo que se colapse  -->
                  <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="#">QR Sensations</a>
                    <div class="nav-collapse">
                        <ul class="nav">                             
                          <li class="divider-vertical"></li>
                          <li><a href="http://www.qrsensations.com/" ><i class="icon-home icon-white"></i></a></li>
                          <li class="divider-vertical"></li>
                          <li class="active">
                            <a href="http://www.qrsensations.com/collections">Collections</a>                               
                          </li>

                          <li class="divider-vertical"></li>
                          <li><a href="#">Access</a></li>
                          <li class="divider-vertical"></li>
                        </ul>

                        <form class="form-search" >
                          <div class="input-append">
                            <input  type="text" class="span2 search-query">
                            <button type="submit" class="btn"><i class="icon-search icon-white"></i></button>
                          </div>
                        </form>
                    </div>
              </div>
        </div>

Any idea what's happening? Thanks in advance for your help

Upvotes: 4

Views: 3366

Answers (2)

Srinivas
Srinivas

Reputation: 1

I had the same problem, here the solution for your problem is "just remove divider- vertical class for the li element".

And the collapse will work.

Upvotes: 0

Adam Grant
Adam Grant

Reputation: 13125

Works for me: http://jsfiddle.net/xUTJt/

Did you remember to put 

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">

Above all this? It will work after that. If not, you may not be referencing Bootstrap JS/CSS correctly. Please check the console for any errors.

Upvotes: 1

Related Questions