Clickable Parent Menu Items with Roots Theme and Twitter Bootstrap

Most users are familiar with dropdown menus on websites. Move your mouse pointer over the parent and it shows the dropdown menu with the children links.

The Twitter Bootstrap, in order to accommodate mobile devices, has this functionality as “on click” for the dropdown to appear, instead of mouse over. As a result, the top level menu item is disabled.

If you don’t plan on supporting mobile devices, you can get around this by making two small edits to the Roots theme

CSS

In your app.css file (roots/assets/css/app.css) add the following:

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

This forces the dropdown to display on hover.

Nav.php

Update your nav.php file (roots/lib/nav.php). In line 27, you’ll see:

$item_html = str_replace('<a', '<a data-toggle="dropdown" data-target="#"', $item_html);

Remove the data-toggle="dropdown" part.

Now your dropdown menu should appear on hover and the parent menu items will be clickable as links.