Menu Tricks with Drupal, Bootstrap, and Special Menu Items

Here are 2 tricks I use on every Bootstrap-based Drupal website to make sure top-level menu items work correctly on all devices.

Drupal's Bootstrap theme makes developing responsive sites streamlined. But the way it handles menus can be problematic. Moreover, if you are using the Special Menu Items module, its out-of-the-box configuration will make the links nonfunctional on touchscreens.  Here are 2 quick tips I use on almost every website to make menus work across devices.

Special Menu Items - which is great for creating placeholder links -  will automatically create a span around your placeholder links. In order for the links to work (that is, to actually trigger the dropdown) on touchscreens, this needs to be changed to an anchor link. At  admin/config/system/special_menu_items, change the "HTML tag for nolink " from

    <span>

to

    <a href="#">

 

The default Bootstrap menus are designed to work with touchscreens, and as a result, the top level menu item - whether a placeholder or an actual link - is unclickable. To fix this, a simple solution is to create a javascript file containing:

jQuery(document).ready(function () {   
DropdownToggle();
});
function DropdownToggle() {
jQuery('.dropdown-toggle').removeAttr("data-toggle");
}

name it menu.js (or whatever you like), and call it from your .info file, e.g. " scripts[] = 'scripts/menu.js'".