Bootstrap nav-bar menu includes drop-down support. This "feature" is both desirable and undesirable to some users.

...I am not sure if this is how the menu is supposed to behave but its pretty odd.

Proposed resolution/remaining tasks

  • Add a theme setting to enable/disable Bootstrap drop-down menu support.
  • Provide library detection support for the jQuery Plugin in #5
  • Update documentation to include different menu configuration use-cases. List extra useful modules/libraries that will help with this task.

Original report by Kristina Katalinic

I am totally new to the bootstrap theme so I am not sure if this is how the menu is supposed to behave but its pretty odd.
Basically I've created some menu items with submenus, made parent items expanded, am using jquery 1.7 and so on.
My Submenus show on parent menu click however:

1. I thought they are supposed to show on hover?
2. When any manu item is expanded and has children when you click on it then it will show submenu items but there is no way to click on parent with children and go to the node parent menu belongs to.


h3llomrj’s picture

Below is a link to one of the founders of bootstrap explaining why bootstrap menus only drop-down on clicks and not hovers. A fairly well reasoned response if you ask me.

I think to switch it to hover involves replacing data-toggle="dropdown" with data-hover="dropdown" on each

  • with a submenu but don't take my word on that.
  • Kristina Katalinic’s picture

    Status:Active» Closed (works as designed)

    Hi ukcph_matt and thanks for your response. Since submitting the ticket I actually stumbled upon the stackowerflow thread on the subject of hover dropdowns and the fact click is intentional behaviour. Whilst I can see Mark's point he kinda fails to see what behaviours 99% of web users are used to in terms of menu's. Anyways I found a fix for hover dropdowns but, nothing so far that would make my parent items go where they're supposed to instead of "#".
    In any case great effort on behalf of bootstrap developers as well as, yourself for porting it to Drupal but I don't see it catching on so long as the menu defies general users logic. Perhaps bootstrap develops should consider offering hover menu's with active parent items as an option in the build bootstrap interface.

    just my 2 cents

    robhoward79’s picture

    After a lot of looking around I discovered if you can turn the parent links back on.

    In twitter_bootstrap/includes/ There is a function on line 70 called: twitter_bootstrap_menu_link

    There are a bunch of commented out lines:

    //$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
    //$element['#attributes']['class'][] = 'dropdown';
    $element['#localized_options']['html'] = TRUE;
    $element['#title'] .= '';

    // auch
    //$element['#href'] = "";

    I just commented out the bottom one and re-enabled this line (I removed the '' bit because I think this is just unnecessary styling):

    $element['#title'] .= '';

    I now have links that click through and dropdowns that appear on hover :)

    I haven't fully tested this, but thought I should share my discovery ASAP. I really hope this helps!

    Kristina Katalinic’s picture

    Category:bug» feature
    Status:Closed (works as designed)» Active

    what version of Bootstrap are you using because by now the function you are mentioning is called "bootstrap_menu_link" (The twitter part was dropped some time ago) and it looks like this:

    function bootstrap_menu_link(array $variables) {
      $element = $variables['element'];
      $sub_menu = '';
      if ($element['#below']) {

        // Prevent dropdown functions from being added to management menu as to not affect navbar module.
        if (($element['#original_link']['menu_name'] == 'management') && (module_exists('navbar'))) {
          $sub_menu = drupal_render($element['#below']);

        else {
          // Add our own wrapper
          $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
          $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
          $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';

          // 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';
          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'] = '#';
    // Issue #1896674 - On primary navigation menu, class 'active' is not set on active menu item.
    // @see
    if (($element['#href'] == $_GET['q'] || ($element['#href'] == '<front>' && drupal_is_front_page())) && (empty($element['#localized_options']['language']) || $element['#localized_options']['language']->language == $language_url->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";

    Still it would be great to have parents that work and hover submenus. I know bootstrap framework developers don't want it that way but perhaps our own Drupal bootstrap theme developers would consider adding that option because thats how most Drupal menu's work :)

    andregriffin’s picture

    All you need to do is comment out the following lines in

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


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

    If you're using a subtheme, I believe you could add something like this to your template.php

    function bootstrap_subtheme_menu_link(array $variables) {
      unset($element['#localized_options']['attributes']['data-hover'] = 'dropdown';);
      unset($element['#localized_options']['attributes']['data-target'] = '#';);

    and add the following to your style.css

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

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

    Alternatively, there is a plugin for Bootstrap that may handle this functionality.

    markcarver’s picture

    Category:feature» bug

    Personally, I think this should be removed. Or at the very least throw a theme setting around it. I really don't like having to "revert" what the base theme is doing in a sub-theme just to get the "normal" CSS-hoverable expanded menus that most/all client sites require. I kind of consider this more of a feature of Bootstrap than best practices in Drupal. People probably want/expect "normal" menus for their websites. This feature is great if you're building an "application-based" site, but it probably shouldn't be the default.

    Kristina Katalinic’s picture

    +1 Mark Carver.
    Couldn't have said it better myself! Bootsrap has many advantages but in terms of menu it fails to deliver for average/most/all clients.
    Either get rid of it all together so its more appealing to regular/most/all clients or like you said throw a setting around it.
    Solution from #5 looks like it could do the job.

    andregriffin’s picture

    The reasoning behind no hover is the same reason many people use Bootstrap at all; mobile device support. The hover effect rarely works as expected on touch devices (sometimes it opens the menu, sometimes it loads the link, sometime multiple taps are required to load the parent link-which almost no one will try). The Bootstrap team made a conscious decision to change dropdown behavior in an effort to support touchscreen devices and have consistent behavior across all devices. Regardless of "best Drupal practices", I support this change as a better UI practice.

    In general, the worst that will happen is a mouse-input user will click a top-level link, expecting to be taken to some broad category, but instead be presented with a menu of more specific subcategories. I suggest using the Special Menu Items module to build your top-level link of a dropdown to be a <a href="#"> or <span> element. It takes a different approach to structuring your menus, but I support this default Bootstrap behavior. However, a theme setting would be welcome (and the modification to enable hover is quite simple, as #5 shows).

    windmaomao’s picture

    #8, thanks andregriffin, this helps me a lot, i didn't know the special menu item has a setting page :)

    after i change <nolink> behavior from <span> to <a href="#">, the menu on the left just doesn't show the special nolink item, it seems the menu just strip out items with <a href="#"> tag. Is this true ?


    andregriffin’s picture

    Both the navbar and sidebar menu show items in the menu for me. It does strip out the href="#" and replace with data-target="#", but the items show up and work correctly.

    markcarver’s picture

    @andregriffin: I understand your reasoning from a better UI standpoint. I would just prefer this to be a theme setting defaulted to disabled. Often times, clients are stuck in the worst practice mode; asking for things that go against "better judgement". They want things like hover-able drop-down menus, slideshows and flashing neon text.

    Now, I'm not saying that we shouldn't push for using best practices when possible. What we should do, however, is allow easier implementation only when it's actually needed. This type of feature shouldn't be imposed out of the box. I have to do the following, 9/10, to conform to a set of wire-frames and comps:

     * Override Bootstrap base theme's implementation.
    function SUBTHEME_menu_local_action($variables) {

    SUBTHEME_menu_link(array $variables) {

    Personally, I think drop-downs are un-necessary for navigation menus entirely. They complicate things and are often used for site owners (since they know where everything is) than site users.

    The reasoning behind no hover is the same reason many people use Bootstrap at all; mobile device support.

    Mobile support is built into the nav-bar. It is further enhanced by drop-downs for a toggling effect, but does not require drop-downs to ultimately function.

    The Bootstrap team made a conscious decision to change dropdown behavior in an effort to support touchscreen devices and have consistent behavior across all devices.

    I think this is often the most confusing and poorest rational behind making the entire menu drop-downs. Drop-downs are meant to be action oriented. You will notice that on, their entire menu are single items (no drop-downs, evidence for my point above). The only "drop-down" on that menu is for the cog wheel (user profile/settings), which is action oriented. The classes/data attributes to make this happen should be applied to only that menu item, not the entire menu.

    In retrospect, I think this issues definitely needs more thought and discussion behind it. Perhaps it shouldn't be all or nothing, but a hybrid of the two. Or perhaps this should be some sort of module enhancement as I mentioned in #1850194-12: Add support for menu block module. Which leads me to think that perhaps the first order of business should be to figure out #1838982: twitter_bootstrap_ui module. Regardless, what this issue really boils down to for me is: leave it up to the sub-theme/themer's choice. Don't impose something that isn't necessarily always wanted/needed.

    andregriffin’s picture

    A possibly wise compromise to keep better touchscreen support AND keep expected menu behavior for mouse users is to enable hover, but still use <nolink> menu items for the top level of a dropdown. That way the only result on a touchscreen device would be opening the dropdown since the parent item won't have an href, and the menu would still open on hover for mouse users.

    Thoughts on this? And would it be practical to elegantly provide this as a theme setting, while also suggesting the use of Special Menu Items?

    In my case, the majority of the sites I build are enterprise level sites with many pages and destinations, or product oriented sites with many categories. Constraining navigation to what I can fit across the menu horizontally would be impossible, and requiring another page load to load some secondary submenu would be superfluous. But yes, we should consider both use cases. What the default ends up being I suppose should perhaps be geared to the "simpler" type of site configuration.

    markcarver’s picture

    Clients dictate what get's built. Some clients want the top level item to click-able (usually because it's the landing page). I'm not agreeing with their rational, but ultimately they write the checks. What I'm getting at is:

    Menus are a complicated bunch. Every site is different and we shouldn't box ourselves in to any standard (ie: which is ironic in and of itself since this is subjective to say the least). Perhaps it would be better to only provide minimal support and build on top of it what is necessary by providing an elegant theme setting to enable. Am I understanding your correctly?

    If you agree, then the actions for this issue should probably be:

    1. Wrap the menu alterations in a theme setting, disabled by default.
    2. Expand #1856832: Create a documentation section and update the documentation to include different menu configuration use-cases. Listing extra useful modules that will help with this task.
    aendrew’s picture

    It's easy enough to do either, y'know... Just create a theme settings page and have a toggle for that behaviour. It's like 20 minutes of coding. I'd submit a patch myself if I wasn't so busy right now.

    markcarver’s picture

    @aendrew: Code isn't the issue. It has more to do with mine, and I'm sure others, caution in preventing yet another feature creeping base theme (like Omega, Zen, AT became). Obviously though, this is one of those cases. I would also really prefer not to add any more dependencies on modules/libraries to accomplish the task at hand.

    It really just boils down to the community as a whole deciding the direction on this. @andregriffin and I have discussed it above and seem to have a little difference in opinion; or we did, but came to a conclusion and I am just waiting to hear back. Ultimately though, I still prefer to hear more feedback than just the two of us before we come to a decision on proceeding any further.

    Preemptive patches can lead an issue down the wrong road in situations like this, which is why neither of us have posted one yet.

    Kristina Katalinic’s picture

    @Aendrew and @Mark Carver here is my 2 cents on this becoming a theme setting.
    I've implemented the solution originally mentioned in #5 and I have to say its working very nicely for me as it gives me hover dropdowns in desktop and toggle dropdown on mobile and portrait tablet and thats just the perfect balance IMO.
    @Mark Carver I agree with your approach where you're not wanting to make bootstrap feature creep like some of the other Themes but, I do believe that adding solution to theme settings is one of those basic features and not an overkill. Incidentally I was a huge Omega fan just like you previously and it was your post that made me consider Bootstrap. Since then I've tried Radix as well where hover menu's come out of the box but, somehow I kept on leaning towards this Bootstrap project. Menu was certainly not the reason why I favour Bootstrap over Radix even thou hover menu (like most clients want it) out of the box is nice I feel that theme setting with an option to use the solution I tried above has many advantages because it doesn't just add hover effect on Desktops but, it maintains the Toggle on mobiles where its really needed so it definitely wins my vote.
    This is what I did

    function bootswatch_slate_menu_link(array $variables) {
      $element = $variables['element'];
      $sub_menu = '';
      if ($element['#below']) {
        // Ad our own wrapper
        $sub_menu = '<ul class="dropdown-menu">' . drupal_render($element['#below']) . '</ul>';
        $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
        //$element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
    $element['#localized_options']['attributes']['data-hover'] = 'dropdown';
    $element['#localized_options']['attributes']['data-delay'] = '500';
    $element['#localized_options']['attributes']['data-close-others'] = 'false';

    And what I have now is a nice hover on Desktops and then on mobile devices toggle comes back on for parents so you can navigate to all the children effortlessly and if you actually want to go to the parent menu you just have to click on it again which is what most users would do if it didn't work for them the first time :) The only drawback I can see is if you have a structure like

             |_ Submenu1
                               |_ Submenu2

    Because in that case it is not so intuitive as Submenu1 adapts the same behaviour as top level parent so it kinda forces the user to think he has to navigate down to the deepest level.
    But who has a menu structure like that anyways? Except maybe directories but there the user is likely looking for the deepest level.
    So yeah parents need 2 clicks (touches really). But, what does a regular user do on his touch screen when first touch doesn't produce desired response? He touches again thinking the screen must have not registered the first touch :D

    Kristina Katalinic’s picture

    Ideally thou on mobile devices the toggle would be applied only to <span class="caret"></span> which would get some extra padding on mobiles and that would make mobile navigation very natural and advanced. And for desktops we'd just have the hover effect. Although I am not even sure if thats possible but, just saying it for the sake of all the code wizards on here who would know :)

    markcarver’s picture

    @Kristina Katalinic: I'm not too keen on adding an additional external jquery plugin to the project. For one, it has it's own issue queue and I certainly don't want to maintain it here. It also has no license, which may or may not be an issue in and of itself (pretty sure it has to be GPL2+ to be included with a d.o repo, not entirely sure though). Regardless, it's a jQuery plugin. It should probably go in site/*/libraries instead of the theme. So I think a more acceptable solution would be to provide library support for this additional feature and automatically include it if the library exists. This will avoid having to add another checkbox for this additional feature.

    I'll update the issue summary here shortly to reflect what has been discussed thus far.

    markcarver’s picture

    Title:Expanded menu items issue» Add theme setting for Bootstrap drop-down menus
    Category:bug» feature

    As I thought and per timplunkett and chx on IRC: no 3rd party anything in a d.o project. sites/*/libraries it is.

    Updating title, status and summary to reflect what this issue actually is now.

    markcarver’s picture

    Issue summary:View changes

    Updated issue summary.

    smartango’s picture

    reading issue and suggested solution and I am experiencing a terrible headache ... w.. what I have to do to disable the dropdown? move it in a block? and styling it as navigation? that's it? not commenting and writing, right? this do not change nothing in handset device

    thank you to who want to reply

    smartango’s picture

    Sorry, what I was really looking for is a way to disable collapse behaviour of navigation, I just removed this from page.tpl.php:

    <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>

    and removed nav-collapse and collapse from navigation menu block

    and solved it. Probably unrelated but this is what I was looking for and maybe someone else lay on this issue for the same reason

    tr33m4n’s picture


    I was redirected here for help. I want to enable the dropdown subs on my site homepage however by default this is not how it behaves, the dropdown appears after you have visited the parent menu item. Is there a way to do this?



    markcarver’s picture


    Regarding manually overriding how the menus render see how the base-theme creates them: template.php.

    You might want to do something similar to what I do though (it will expand all children (if configured to do so), regardless of active state):

    = menu_tree_page_data(variable_get('menu_main_links_source', 'main-menu'));
    $variables['primary_nav'] = menu_tree_output($primary);
    charlie charles’s picture

    TB Mega Menu is pretty good for most menu cases
    it use's the bootstrap frame work too

    voodoodan245730’s picture

    Comment #5 returns an error.

    I fixed this issue by doing two things :

    1- Configure your main links to be "Expanded" in Drupal's admin panel
    2- Without modifying the Bootstrap base theme, create a custom.js in your sub-theme folder and use the following code :

    jQuery(document).ready(function () {

    function DropdownToggle() {

    This removes the data-toggle attribute from the links.

    Then via CSS allow the dropdown-submenu ul to display on hover of the parent link,

    JadH’s picture

    the TB Mega Menu is a very nice module.
    It is very flexible, however, it seems that it is not working with bootstrap theme.
    here is the issue.

    I think that the best solution for this would be to have TB megamenu working properly with the theme and keep the default settings as they are in basic theme.

    I have installed both on a project and trying to figure out why they are not working together.

    JadH’s picture

    Issue summary:View changes

    Updated issue summary.

    catopuma’s picture

    I agree that TB Mega Menu is a nice module but it has issues and for me is this solutiion not clean enough. It is better use a simple CSS solution and control that over the Template configuration.

    Mario Baron’s picture

    TB Menu is a module and the issue is about including hover drop down menus in theme layer so I don't see the the suggestion to use TB Menu as anything else but hijacking the issue and promoting a module which I have not even tried since last time I purchased a TB Theme it sucked so much I stay clear of anything TB

    ainz’s picture

    @tr33m4n regarding your question


    I was redirected here for help. I want to enable the dropdown subs on my site homepage however by default this is not how it behaves, the dropdown appears after you have visited the parent menu item. Is there a way to do this?



    The reason this is happening on your homepage is because you haven't enabled "Show as expanded" in your menu item. For each of the menu items that you want to be dropdown menus on the homepage you have to go to Structure > Menus > Main Menu (or whichever menu) > Click on the parent and check the "Show as expanded" checkbox. This issue has nothing to do with bootstrap but rather you just need to enable this setting to fix your issue.


    JadH’s picture

    @MarioBaron: I apologise if it looked as if I am promoting the module, it was not my intention at all.

    Danny Englander’s picture

    I'm building a distro using a Bootstrap subtheme and I really need complete control and customization over the main menu so I grabbed the code from #4 and customized away, it now works perfectly the way I need it to. The way I look at it, Bootstrap is really a builders / themer's theme, so one would expect to have to do some customization and digging into code.

    joetip’s picture

    Thanks voodoodan245730 (comment #25). My steps were similar:

    1. In menu, choose Expanded option for items with sub links.
    2. Add this to template.php in my theme:

    function your-theme_preprocess_page(&$vars, $hook) {
      // Add javascript to trigger bs dropdown.
      drupal_add_js("jQuery(document).ready(function () { jQuery('.dropdown-toggle').dropdown(); });", 'inline');

    I didn't implement hover since it doesn't help with touch screens.

    Be sure to clear your cache for changes to take effect.

    markcarver’s picture

    Title:Add theme setting for Bootstrap drop-down menus» Refactor navigation/menus
    Version:7.x-2.x-dev» 7.x-3.x-dev
    Category:Feature request» Task

    A whole refactoring just needs to happen. Current code is legacy cruft that causes many issues.

    markcarver’s picture

    hkirsman’s picture

    This is how I enabled the whole main menu to have submenus

    mosesdog’s picture

    I hope this is the right thread, I've been looking around quite a bit.
    I am able to get drop-downs to work on a primary menu structure, but not a menu that runs off the primary but starts with a secondary tree item. Example:
    This shows drop-downs:
    Sidebar Menu 1

    • Page 1
    • Page 2
    • Page 3

    This does not:
    Sidebar Menu 2

    • Page 1a
    • Page 1b
    • Page 1b

    I hope that makes sense.

    kaido24’s picture

    Not sure what the problem anymore. I see lots of issues related with adding and removing the navigation.
    My problem was I needed to remove submenu navigation. I guess I used some state of dev 7-3.x-dev.

    Bootstrap 3 - Remove submenu dropdown if menu name = main-menu

    * Implements theme_menu_link();
    function YOURTHEMENAME_menu_link(array $variables) {
      $element = $variables['element'];
      if ($element['#original_link']['menu_name'] = 'main-menu' && isset($element['#below'])) {
        $variables['element']['#below'] = array();
      return theme_menu_link($variables);
    Kristina Katalinic’s picture

    @Mark Carver are we getting anywhere with this in 7.x-3.x . I can see that v 7.x-3.1 will be a version with most options enabled from settings page but still no sign of hover or multilevel menu support. I know, I know Bootstrap people are saying multilevel drop downs are complicating things but there is a lot of regular folks who would disagree with them... The original solution almost works in v 7.x-3.x but I believe I've reached the limit of my "skills" to take it any further. Perhaps someone like yourself would have less problems in getting this to work?
    Clickable parent menu items with hover support and multilevel subs?

    markcarver’s picture

    This issue is no longer about just dropdowns and sub-menus (which are removed and will stay removed, see #2122539-13: Sub menus no longer exist in Bootstrap 3: obsolete code in bootstrap_menu_link) it's about the entire theme function/template override code refactoring now. Unfortunately I have not had the time to work on this particular issue yet.

    Kristina Katalinic’s picture

    Good news everyone :)
    I managed to get

    • Hover Dropdown menus
    • Multilevel Sub menus
    • Working (clickable) Parent/Top menu links

    thanks to smartmenus plugin for Bootsrap 3.x and it was really easy to implement. As @Mark Carver pointed out some time ago in #19 no third party allowed in d.o but for those interested in implementing this into their subthemes I wrote a how to guide at
    I've done some considerable testing and it works like a charm on both Desktop and Mobile devices and it actually does more than I was hoping for

    Some of the key features quoted from plugin author's website

    • Optimized for mobile and desktop browsers supporting touch, mouse or both inputs at the same time
    • Section 508 compliant and fully accessible to assistive technology like screen readers
    • Unlimited menu trees on the same page and unlimited sub menu levels supported
    • Horizontal or vertical main menu items arrangement
    • Absolute/relative/fixed positioning for the main menus supported
    • Right-to-left and bottom-to-top display of the sub menus is possible
    • Full support for RTL text/pages (e.g. Hebrew, Arabic)
    • Full window size detection - the menus will always be kept inside the window's boundaries
    • Automatically adjustable width for the sub menus is possible (including min/max settings)
    • Keyboard navigation friendly (Tab key)
    markcarver’s picture

    Thanks @Kristina Katalinic! That's an awesome blog post and you're right on the money. I understand that some people still want this type of menu and this is a good place to reference. Could you add this a resource on

    Kristina Katalinic’s picture

    @Mark Carver Done! My first documentation edit and 4AM here so I hope, I done it right (feel free to edit if needed).
    Thank you for sticking with this issue all this time, and for converting me to Bootstrap in your blog post few years ago or, should I say ~ 47000 users ago :)

    sonicthoughts’s picture

    FANTASTIC. Frankly, it wasn't clear that this was missing in the first place. My vote would be to put this right on the project page!
    I'm a system builder, not a developer, and have a couple of related questions:
    We have a BS 3.2 code and have been using the beta2 release. Do you expect this will work with beta 2? What about other BS versions? Note there are a lot of browser bugs fixed with more recent BS code (ref:

    Kristina Katalinic’s picture

    @sonicthoughts as the post mentioned in #40 explains this was only tested with current stable release of Bootstrap 7.x-3.0, once 7.x-3.1 is released I will update my post with new instructions.
    As far as Bootstrap framework is concerned (in theory) plugin itself should work with latest Bootstrap version 3.3.1
    However I did not have the time to test this, so perhaps you could recompile your .css and .js files from 3.3.1 codebase on a non production version of your site and report back with test results.
    Sorry I could not provide you with better answers to your questions at this time :(

    knalstaaf’s picture

    I followed the steps from the blogpost mentionned in #40 on my 7.x-3.0 installation, but it doesn't seem to work. The problem is that it wouldn't use the overridden menu-link.func.php file. I copied the same structure (mysubtheme/theme/menu) and changed the function name (function MySubthemeName_menu_link(array $variables), emptied the cache.

    Edit: solved. When I copy the code from this file to my template.php instead, it works.

    Edit 2: The menu wouldn't flyout on hover. Solved: I'm using the minified script (jquery.smartmenus.min.js), so I had to adjust this in my info-file accordingly.

    It's possible that the parent menu item has to be set to "Show as expanded" before it works on all pages.

    Edit 3:There's an issue when I check Aggregate and compress CSS files in the performance config; my CSS is all gone and the subtheme falls back to the default Bootstrap styles. Solved: Troublemaker is line 100 of jquery.smartmenus.bootstrap.css: .navbar-nav .collapsible > li > a {white-space:normal;}. When I change this to {white-space:nowrap;}, all seems fine again.

    Kristina Katalinic’s picture

    @Mark Carver I am puzzled which is the most correct way to apply overrides from #40 ?
    Place menu-link.func.php in;
    1. /YourBootstrapSubthemeName/theme/menu/menu-link.func.php which follows the base theme logic or
    2. /YourBootstrapSubthemeName/templates/menu-link.func.php which follows the README.txt provided in templates folder of base theme

    no 1. appears unable to override base theme default

    // Generate as standard dropdown.
          //$element['#title'] .= ' <span class="caret"></span>'; Smartmenus plugin add's caret

    @knalstaaf Yes, the parent menu item has to be set to "Show as expanded" , it wasn't mentioned in the tutorial because its a standard Drupal behaviour. If you don't want to have to set "Show as expanded" all the time I believe Mike Carver posted a solution in one of the earlier comments in this thread.

    knalstaaf’s picture

    The caret's of the navigation disappear when I submit something, or empty caches. -> Basicly when a message needs to appear on the page (such as "page is saved", or "caches emptied"). Also my jQuery slideshows are gone from the page after the submission.

    Simply refreshing the page brings it all back.

    I removed the PHP-code mentioned in #40 from the template.php, and then it seems to be solved. Same goes for when I put the very PHP-code back, and disable the (patched) admin menu.

    I'm getting this error from the admin when all of the above is enabled:

    Error: TypeError: $.browser is undefined
    Line: 223

    So some of these parties are getting into a fight when a submit-action is performed.

    This also occurs in Chrome (straight after logging in for instance).

    MyriamB’s picture

    #40 is an excellent solution! Thank you Kristina

    But I had a double caret on my submenu item, telling me that menu-link.func.php was not recognized and did not override bootstrap default behaviour as expected.

    So I used the function in my subtheme template.php instead of inside the suggested menu-link.func.php, and it works like a charm.

    JakeWilund’s picture

    I apologize in advanced if this has been specifically addressed here already, but in regards to menu blocks with expanded menu links, is it possible to disable the dropdown functionality? I'd like to have a more traditional menu block in a sidebar where all menu items are expanded and shown by default, and child links are indented under their parents. Basically, how a menu would appear on a theme like Bartik.

    kaido24’s picture

    @JakeWilund Did you try #37

    asb’s picture

    I was also looking for a way to enable reasonable dropdown functionality in Bootstrap. For some slightly related reasons I had to upgrade to the current bootstrap-7.x-3.x-dev from 2015-Jan-14 (opposed to the recommended release from 2013-Nov-17). As suggested in #40, I tried to implement the smartmenus plugin.

    The result is that submenu's on hover are still not working, but submenu's on click event are gone as well. Bootstrap's primary menu just became a flat menu. Very puristic, the look & feel was a bit like my first baby steps with HTML in the 1990's. Not exactly what I was expecting from bleeding-edge Bootstrap. Lesson learned after spending a cuple of hours: Functionalities like this need to be in the theme itself and have to be tested for compatibility with every release. It's wasted time to work against a framework (intended menu behaviour) and against a Drupal theme at the same time (overriding the theme's implementation of the intended menu behaviour). The workaround from #40 is tested against 7.x-3.0, so it is better only used with 7.x-3.0.

    So click on menu it is. If desktop users think the menu is broken because it doesn't hover, we could send them a printed copy of this issue. They would understand. Usability is highly overrated, anyway.

    knalstaaf’s picture

    @asb: have you tried the steps I took in #45?

    asb’s picture

    @knalstaaf: Sure, yes.

    neardark’s picture

    new63.42 KB

    @asb - I tried the steps in #40 on the latest dev version, and it worked well for me. I've embedded a video gif that demonstrates -- hopefully this is the functionality you're looking for.

    Edit: I should note that the cursor is hovering, not clicking above.

    lunk_rat’s picture

    I totally agree that hover navs are not a good practice and should be avoided (big touchscreens that do not trigger the collapsed navbar are increasingly common). I also agree with @markcarver that clients want hover-activated dropdowns and you give the client what they want or you risk eviction!

    I just wanted to share that I recently worked on a navbar for a client and the design called for hover-activated dropdowns. I was able to talk them out of it using the logic of the Bootstrap project creators! Then I found this thread where the same dynamic played out.

    Thanks @Kristina Katalinic for the awesome #40! I will keep it in my back pocket for when I am unable to convince the client otherwise . . .

    kristin.e’s picture

    Thanks @Kristina Katalinic for a great solution. This was all working fine on my dev version of a site I'm developing but when I compress javascript on production site the dropdown function stops working altogether. Has anyone else come across this? It would be great to get a solution for this.

    knalstaaf’s picture

    Hi Kristin, sounds familiar to edit 3 of #45.

    kristin.e’s picture

    Thanks @knalstaaf - I did try your fix out but it didn't work for me unfortunately :/

    sonicthoughts’s picture

    FYI - I'm using suggested fix with 7.x-3.1-beta2+20-dev (2014-Nov-20) and bootstrap v 3.2.0 and have not had a problem. Thanks Kristina.

    markcarver’s picture

    Version:7.x-3.x-dev» 7.x-4.x-dev
    Status:Active» Postponed

    Given that this will, undoubtedly, be a BC break... I'm going to have to bump this to be addressed in the next major.

    GiorgosK’s picture

    here is very easy solution based on #25 no need for external libraries
    and works with hover when we have desktop    if($('.navbar-toggle').css('display') == 'none'){
    and Click otherwise (smaller screens)


    (function ($) {
      $(document).ready(function() {
      });//document ready

      $( window ).resize(function() {
      function BootstrapDropdownToggle() {
        if($('.navbar-toggle').css('display') == 'none'){


    .regularMenu ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;
    ckng’s picture

    (Looks like it was already suggested earlier in this issue :) )
    For menu dropdown on hover, best and easiest integration would be

    Duplicate bootstrap_menu_link() into your theme and add

    $element['#localized_options']['attributes']['data-target'] = '#';
    $element['#localized_options']['attributes']['class'][] = 'dropdown-toggle';
    $element['#localized_options']['attributes']['data-toggle'] = 'dropdown';
    // add dropdown hover support
    +     $element['#localized_options']['attributes']['data-hover'] = 'dropdown';
    // make first level menu clickable
    +     $element['#localized_options']['attributes']['class'][] = 'disabled';
    knalstaaf’s picture

    EDIT: #62 doesn't work on iPad for me.

    aitala’s picture

    Hm, I'm finding this thread to be a bit confusing.

    I'm looking to do the dropdowns but only on a click of the menu item (and not having that link actually be a link) Is this doable with method #63 (which was removed)?

    I'm using the 7.x-3.0 version of the Bootstrap theme... and using Special Menu Items...

    Note: I did find that setting

    // make first level menu clickable
                $element['#localized_options']['attributes']['class'][] = 'enabled';

    makes the top menu links not clickable.

    EDIT: However, as noted above, this does not work in iOS.

    I found my issue with the menu drop downs not being opened by clicks - had the local bootstrap file method mixed with CDN method... seems to break things :D



    jomarocas’s picture

    @knalstaaf where are the file in bootstrap? i have the problem in bootstrap 1 when i Aggregate and compress CSS files but the js working but no the css, any idea

    knalstaaf’s picture

    @jomarocas: it's actually BS3. The mentionned file is dowloaded with smartmenu plugin.

    sonicthoughts’s picture

    fYI After performing steps in #40: Static/anchored nodes, I have same issue as #65: notify replies to *own* content (nodes, comments)

    janpan’s picture

    Anyone looking for a simple solution to just have expanding menu's when hovering over them (with bootstrap 3 subtheme), just add some javascript.

    in your template.php

    (drupal_get_path('theme', 'your_theme_folder_name_goes_here') .'/js/menu-hover.js');

    Then actually create the above mentioned javascript file, aka your_theme/js/menu-hover.js

    Then in that file, add the following javascript:

    +(function ($)
                $(".menu li").hover(
                    function ()
                    function ()

    You can expand on the solution, but this works and you still have your mobile functionality.