Hi I installed a bootstrap theme in drupal 7. I had a requirement to bring hover support to drop-down menu and make parent menu clickable to display its own content. I acheive this through some css and theme_menu_link. But Now the problem is with mobile version when I click main-menu item the page is reloaded and cannot access the dropdown submenu. So it it possible to make parent menu display submenu in touchscreen devices without reloading the page with my piece of code or any other solution? Plz help

Thanks in advance!

function mytheme_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']);
elseif ((!empty($element['#original_link']['depth'])) && ($element['#original_link']['depth'] == 1)) {
  // Add our own wrapper.
  $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
  // Generate as standard dropdown.
  $element['#title'] .= ' <span class="caret"></span>';
  $element['#attributes']['class'][] = 'dropdown';
  $element['#localized_options']['html'] = TRUE;

  // Set dropdown trigger element to # to prevent inadvertant page loading
  // when a submenu link is clicked.
  $element['#localized_options']['attributes']['data-target'] = '#';
  $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle disabled';

// 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";
  • What's the CSS that you added and why did you have to mess with menu_link function? The hovering in bootstrap can be done via CSS and a media query to prevent hovering on small devices. – burnsjeremy Jun 9 '15 at 7:55
  • The CSS solution by itself is something along the lines of 3-5 lines of code, @media (min-width: 979px) { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } } of course I would be more specific to the menu and use the correct media query but that's the gist of what you would need to do. – burnsjeremy Jun 9 '15 at 7:57
  • @burnsjeremy I have to mess with with menu_link function for making parent menu clickable to display its own content.But that applies for mobile version too. hence not able to navigate in mobile version as in mobile clicking on main menu reloads the page rather showing sub menu – Md Eqbal Ahmad Jun 9 '15 at 12:25
  • I still would like to see the CSS change and maybe even the HTML that the menu outputs, I'm not getting a clear picture of how the menu has to work and where it's going wrong on mobile is hard to picture. – burnsjeremy Jun 9 '15 at 14:31
  • webmar.com.au/blog/drupal-bootstrap-3-multilevel-submenus-hover Have you seen this? This is probably closer to what you are trying to do and gives a pretty good explanation of how to change the behaviors – burnsjeremy Jun 11 '15 at 7:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.