Dropdown Menu

[tfbarrett1981]

When I shrink my browser down the menu becomes a drop-down which works great. But if I visit the site on a mobile browser both IPhone and Android the drop-down doesn't work, when I try to click it nothing happens. Any Ideas?

[Trippnology]

I get the same results on Win7/Firefox. When resizing the window, the menu changes to a dropdown as expected but the dropdown button does not reveal the menu.

EDIT: Same symptoms in Chrome, Opera, Safari and IE.

[Trippnology]

Does this happen for everybody? I need to find out if it is wp-bootstrap or some other code causing this issue.

[Trippnology]

I found that script minification was causing this issue (for me anyway). When I disabled JS minification in W3TotalCache the menu works as expected.

Just to be clear, the problem is with the bootstrap collapse plugin not the bootstrap dropdown plugin (both of which are included in /library/js/script.js)

[martip07]

Any other way to make it work without w3totalcache ?

[doubleotoo]

Any updates on resolving this issue?

Update: I found the problem with my installation (might just because I'm a Wordpress newbie): I was not including the bootstrap-collapse javascript.

Solution Attempt #1

Edit wp-bootstrap: Theme Functions (functions.php) to add <script> tags to load bootstrap-collapse.js:

Appearance > Editor > Theme Functions (functions.php)

function my_scripts_method() {
  // bootstrap-collapse requires bootstrap-transition.js
  wp_deregister_script('bootstrap-transition');
  wp_register_script('bootstrap-transition', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js');
  wp_enqueue_script('bootstrap-transition');

  wp_deregister_script('bootstrap-collapse');
  wp_register_script('bootstrap-collapse', 'http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js');
  wp_enqueue_script('bootstrap-collapse');
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Note: this is probably not the right way to do this, but it works.

Solution Attempt #2

Edit wp-bootstrap: Header (header.php) to make navbar collapsed by default and remove toggle button:

1. Add collapse class to the div:

   <div class="nav-collapse collapse">
       <?php bones_main_nav(); // Adjust using Menus in Wordpress Admin ?>
   </div>
   

2. Remove toggle button, i.e. remove this code:

   <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
       <span class="icon-bar"></span>
   </a>