It is possible to use the solution mentioned in #16 with Bootstrap 3 as well. Since Bootstrap 3 is the current version and more likely to be used from now on I am forking the issue to 7.x-3.x because I am sure many people will run into this problem mainly because Bootstrap framework developers seem to want to change the current user behaviour on the web rather then support the behaviour itself.

In any case I was able to implement the solution from #16 into Bootstrap 7.x-3.0 with the code bellow added to my template.php. However, the problem is not completely solved because on Desktop it works beautifully and hover, and follow the menu href works as expected.
In mobile it doesn't work for 3 level menu's in a sense that Parent and First Child work with 1 click to open if children present and 2 clicks to navigate to the page itself, unfortunately I have not been able to make it work with second child because once the first child is clicked once it will navigate to the page it links to instead of opening the next level in the menu.

So here is the first half of the solution for Bootstrap 3 hopefully someone will respond with the second and final half of the solution.

function YOURTHEME_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    // Prevent dropdown functions from being added to management menu so it
    // does not affect the navbar module.
    if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar'))) {
      $sub_menu = drupal_render($element['#below']);
    }
    else{
    unset($element['#below']['#theme_wrappers']);
    $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
    $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle disabled';
    $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
	$element['#localized_options']['attributes']['data-hover'] = 'dropdown';
	$element['#localized_options']['attributes']['data-delay'] = '100';
	$element['#localized_options']['attributes']['data-close-others'] = 'false';




    // Check if this element is nested within another
    if ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] > 1)) {
      // Generate as dropdown submenu
      $element['#attributes']['class'][] = 'dropdown-submenu';
	  $element['#localized_options']['attributes']['tabindex'][] = '-1';

    }
    else {
      // Generate as standard dropdown
      $element['#attributes']['class'][] = 'dropdown';
      $element['#localized_options']['html'] = TRUE;
      $element['#title'] .= '<span class="caret"></span>';
    }
  }
  // Set dropdown trigger element to # to prevent inadvertant page loading with submenu click
   $element['#localized_options']['attributes']['data-target'] = '#';
  }
  // On primary navigation menu, class 'active' is not set on active menu item.
  // @see https://drupal.org/node/1896674
  if (($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']))) {
    $element['#attributes']['class'][] = 'active';
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

rest of the magic is done by https://github.com/CWSpear/bootstrap-hover-dropdown which is probably the most widely used "unofficial" Bootstrap Plugin

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Kristina Katalinic’s picture

Kristina Katalinic’s picture

Issue summary: View changes
entrepreneur27’s picture

I was keen to try this. I am not sure how to call the hover js library. I downloaded it from GitHub and put it in my sites/all/libraries folder. But now I guess I need to somehow call it from my template.php file or something? How do i do that? Help would be great.

osman’s picture

Hi entrepreneur27,
You can simply move the JavaScript library into your theme, and reference it from the YOURTHEME.info file.

I'd recommend reading the Theming Guide, specifically this page fits your case: https://www.drupal.org/node/171213

entrepreneur27’s picture

Thank you Osman. I think I get that part now. That reference helped.

I am actually using the Bootstrap theme version 7.x-3.1-beta 1 and I am not getting any hovering. I am wondering if Kristina's code needs to be modified to go with 3.1? If anyone has insights into whether this should work with 3.1 I would be grateful.

Kristina Katalinic’s picture

@entrepreneur27 I have only tested this on stable Bootstrap 3.0 release. From what I can see there are some major changes coming up in 3.1 so perhaps function YOURTHEME_menu_link(array $variables) { needs to be placed somewhere other than template.php file...but as I said I have not tested with 3.1 so I am only fishing...
Have you flushed all caches?

entrepreneur27’s picture

OK. Thanks. Serves me right for playing with dev stuff. I did flush the caches thank you.

I think you are on the right track. It looks like functions need to be their own files inside the theme folder as of 3.1 rather than in the template file. I tried some obvious approaches to doing this but they did not work. But in reality I am clearly way out of my depth now. I thought i would try 3.1 as I keep hoping that some sensible menu approach will be coming to a version soon. And I did not want to get all organized with 3.0 and then have to redo everything again.

But that may have been an error. It's frustrating.

Anyway, thanks for the tips. If you get hover working in 3.1 at some point in the future I hope you will tell us beginners how to do it.

Kristina Katalinic’s picture

@entrepreneur27 You're welcome. You are probably best of sticking to 3.0 for the time being despite the fact that version 3.1 brings many improvements. However, if you chose to stick with 3.1 then your subtheme should probably contain /theme/menu/menu-link.func.php same as the core theme has it only with suggested modifications.
Again, you are probably best of to stick with 3.0 stable release since 3.1 could undergo significant changes by the time stable release is available.

Another rookie mistake is not installing jquery module and setting jquery version to 1.7 minimum ;) I've made it a few times myself and it definitely affects Bootstrap menu functions.

entrepreneur27’s picture

Thanks Kristina: I did try the theme/menu/ etc approach you suggested and I have the right jQuery set (1.9). But for some reason it (menu hover) does not work and I have given up for now. I suspect I am not doing the menu-link.func.php right but it is over my head.

If I get anywhere at a later date will update. Much appreciate the helpful suggestions.

rituraj.gupta’s picture

I am having the same issue. How could I hover the parent menu item instead of click ?
Please help

Kristina Katalinic’s picture

#10 try commenting out $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';

Kristina Katalinic’s picture

For anyone still looking for a solution I just described it at Comment #40 it does everything we discussed here and more so I hope it makes your day :)
P.S. Solution applies to and its been tested with Bootstrap 7.x-3.0 it will likely require an update once Bootstrap 7.x-3.1 as the current .dev version looks like a major overhaul compared to 3.0

Kristina Katalinic’s picture

Assigned: Unassigned » Kristina Katalinic
Status: Active » Needs review

I've done considerable testing with the solution to this issue provided at http://webmar.com.au/blog/drupal-bootstrap-3-multilevel-submenus-hover and I'd be happy to hear from anyone willing to provide feedback.

markhalliwell’s picture

Status: Needs review » Closed (fixed)

Considering that you have posted that comment linking to that issue as well as adding it to the documentation as a resource, I think we can actually close this issue. It will still remain available for commenting while closed though, so no need to re-open.

karan.sapate’s picture

Easiest way is to replace menu render function in desired page.tpl by bellow given function

	$menu_tree = menu_tree_all_data('main-menu');
	$main_mn = menu_tree_output($menu_tree);
	print render($main_mn);
 

and add desired toggle classes in "sites/all/themes/bootstrap/theme/menu/menu-tree.func.php"
like in my case i did
<?php
/**
* @file
* menu-tree.func.php
*/

/**
* Overrides theme_menu_tree().
*/
function bootstrap_menu_tree(&$variables) {
return '

';
}

/**
* Bootstrap theme wrapper function for the primary menu links.
*/
function bootstrap_menu_tree__primary(&$variables) {
return '

';
}

/**
* Bootstrap theme wrapper function for the secondary menu links.
*/
function bootstrap_menu_tree__secondary(&$variables) {
return '

';
}

murthi9772’s picture

-

murthi.karuppan’s picture

.

murthi.karuppan’s picture

.

joseph.olstad’s picture

menus 4 levels deep , expanded

BOOK module, I wanted to replicate the Bartik theme behavior using bootstrap and the book module for a documentation site I've created. (I am using the book module and I want menu navigation with the books)

see patch, screenshot and css.

Book module - 4 levels deep

css