arnabwahid / wordpress-bootstrap

Bootstrap in WordPress theme form - Bootstrap 3.3.1
1.49k stars 557 forks source link

Dropdown Menu #32

Open tfbarrett1981 opened 12 years ago

tfbarrett1981 commented 12 years ago

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 commented 12 years ago

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 commented 12 years ago

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

Trippnology commented 12 years ago

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 commented 12 years ago

Any other way to make it work without w3totalcache ?

doubleotoo commented 12 years ago

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>