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>
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.
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>
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With