Bootstrap with Drupal: dropdown menu on hover

In <bootstrap_theme_folder>/theme/menu/menu-link.func.php, comment:

$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';


$element['#localized_options']['attributes']['data-target'] = '#';

Add to your CSS:

ul.nav li.dropdown:hover ul.dropdown-menu {
  display: block;
ul.nav li.dropdown ul.dropdown-menu {
  margin-top: 0;



Great solution, the best I found online.

Thank you!
Jul 23, 2014
Fantastic solution... thanks a lot !

Sep 17, 2015
Thank You very very much
i have been searching for a fix for around 5 hours now
and this solution works like charm
Thanks Again
Nov 3, 2015
Thank you so much ! Like Serag, I lost some hours to fix it, and this works perfectly. :)
Jan 19, 2016
DRUPAL bootstrap dropdown override
Apr 14, 2016
Excelente funciona perfecto.
Diego Suarez
Oct 14, 2016
How to do only works for devices > 1024 px?
Oleg Terentev
Dec 6, 2016
I see that the Bootstrap Theme now has this same effect built in for the navbar module -- Instead of commenting out these two lines, I simply added this text into the if() clause after "module_exists('navbar))" (and also changing my-nice-menu to the actual menu name that I'm using):

|| ($element['#original_link']['menu_name'] == 'my-nice-menu')

Darrell Duane
May 8, 2017