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


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.


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.

8 replies on “Clickable Parent Menu Items with Roots Theme and Twitter Bootstrap”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.