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.

8 Responses to “Clickable Parent Menu Items with Roots Theme and Twitter Bootstrap”

  1. theboywonder

    Just what I needed buddy! Much appreciated.

    Reply
  2. Daniel

    Thanks! – Saved us a bunch of time!

    Reply
  3. sanghamitra rout

    Thank you very much!!!

    Reply
  4. Daryl

    But what do you do if you wish to support mobile devices AND have top level menu items work?

    Reply
    • Thai Yin

      We’re still working this out. An alternative is to load up an entirely different menu to mobile users, but that’s not ideal.

      Reply
  5. Steven Kohlmeyer

    Thanks for the tip.

    Daryl: The mobile nav differs from the desktop nav. They’re seperate menus.

    Reply
  6. Steven Kohlmeyer

    Separate 🙂

    Reply

Leave a Reply