Bootstrap navbar collapse menu not working with Turbolinks
ruby-on-rails-4, turbolinks, twitter-bootstrap-3
Solution
The responsible here is Turbolinks. And the workaround is to not load the Turbolinks javascript.
In the file
`app/assets/javascripts/application.js`
Delete this line
`//= require turbolinks`
Problem
Bootstrap navbar collapse menu not working with Turbolinks. Working scenario On page load ``` <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button> <div class="navbar-collapse collapse" id="menu"> </div> ``` Click menu and dropdown ``` <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button> <div class="navbar-collapse in" id="menu" style="height: auto;"> </div> ``` Click menu again and collapse ``` <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> </button> <div class="navbar-collapse collapse" id="menu" style="height: 1px;"> </div> ``` Not working (after navigating to any page) On page load ``` the same html, no need to repeat ``` Click menu and dropdown ``` the same html, no need to repeat ``` Click menu again and collapse 3.1. Transient change observed in the debugger ``` <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button> <div class="navbar-collapsing" id="menu" style="height: 96px;"> </div> ``` Note: class="navbar-collapsing" and height: 96px; 3.2. And then go back to the same state ``` <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> </button> <div class="navbar-collapse in" id="menu" style="height: auto;"> </div> ``` Note: Same html as in step 2. Libs versions: - Turbolinks 2.1.0 - JQuery 2.0.3 - Bootstrap 3.0.3 I hope someone can come up with a real answer or an explanation.