Take the 2-minute tour ×

I have a (standard) Twitter Bootstrap menu on my site. When I reduce my browser window or use a smart phone or iPad, the menu gets reduced and you get a button on the right. I can press it once, the menu opens. I can press it again, it closes. But when I click it again it doesn't open. You can view the code at http://www.boajobs.com . Did I miss something as a similar menu works alright on the Twitter Bootstrap site? Thanks.

share|improve this question

closed as not a real question by Andrew Barber Apr 26 '13 at 22:30


1 Answer 1

up vote 3 down vote accepted

The minified version of the Bootstrap CSS you are using is missing some rules for CSS transitions in the .collapse class, which the bootstrap-collapse.js plugin presumes are present. When the plugin collapses the navbar, it adds a listener for a $.support.transition.end event. Since the event is never triggered, the plugin gets locked in a transitioning state, causing it to short-circuit on all future calls.

You can correct the behavior by adding the required CSS transitions back into your CSS file:

Relevant Bootstrap CSS (v.2.1.1)

.collapse {
  -webkit-transition:height 0.35s ease;
  -moz-transition:height 0.35s ease;
  -o-transition:height 0.35s ease;
  transition:height 0.35s ease;
.collapse.in {

Or if you really don't want CSS transitions, you could leave out the bootstrap-transition.js from your JavaScript.

share|improve this answer
Thanks for the detailed explanation! For some reason this is now working in production mode, but not in development mode. Strange! –  Snels Nick Oct 24 '12 at 12:58
