CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
freedomflyer
freedomflyer

Reputation: 2541

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>

Upvotes: 6

Views: 7536

Answers (2)

freedomflyer
freedomflyer

Reputation: 2541

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.

Upvotes: 10

A. A. Trabucco Campos
A. A. Trabucco Campos

Reputation: 361

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>.

Upvotes: 6

Related Questions