Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3 Navbar Expands but will not Collapse

I'm trying to implement a responsive navbar in Bootstrap 3 Things have been working for the most part. The bar even expands correctly. Then, when I press the responsive collapse button again the bar collapses about halfway and then drops back down.

This verifies that the Javascript is in place and that the CSS is in place correctly as well. I don't know how else this could be happening. Even in Plunkr it works, but not in my project. Any ideas?

<div class="navbar">
   <div class="container">
      <button type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse" class="navbar-toggle collapsed">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Title</a>
      <div style="height: 0px;" class="nav-collapse navbar-responsive-collapse collapse">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
         </ul>
      </div>
   </div>
</div>
like image 318
freedomflyer Avatar asked Aug 02 '13 17:08

freedomflyer


2 Answers

It turns out that I included a duplicate compiled Javascript and that there was some mixup with event listeners and so it was being buggy. Fixed.

like image 133
freedomflyer Avatar answered Oct 30 '22 01:10

freedomflyer


I had the same exact issue and resolved it simply by shifting the bootstrap.js before any other .js I had at the bottom of the <body>.

like image 20
A. A. Trabucco Campos Avatar answered Oct 30 '22 01:10

A. A. Trabucco Campos