Question

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.

Answer 1

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 {
  position:relative;
  height:0;
  overflow:hidden;
  -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 {
  height:auto;
}

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