Twitter Bootstrap 3 navbar collapse button not working in Drupal Panolopoly site fix

As of this writing Drupal Panolopoly (version 7.x-1.30) recommended jQuery version is 1.7. Changing to its higher version, you will encounter some strange behavior in javascript enhanced widgets and menus on your site (still a limitation of Drupal Panolopoly is at most jQuery version is 1.7). However, the Twitter Bootstrap 3 minimum jQuery version is 1.9.0. Having the jQuery version set to 1.7, the only strange behavior I have encountered so far in Bootstrap theme is the navbar collapse button which it is not working. In this case, more practical to set the jQuery version to 1.7 because we only have one issue to fix compare to many issues setting it higher than 1.7.

The following is the code snippet for the fix of navbar collapse button issue:

  
(function ($) {
  $(document).ready(function($) {
    $('.navbar-toggle').click(function(event) {
      $('.navbar-collapse').toggle('in');
    });
  });
})(jQuery);
  

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.