How to enable bootstrap dropdown sub-menu’s on hover in roots.io

Rather specific post here but thought it might help illuminate how it works in general. Also I’ll probably need to do this again in the future.

I use and love the roots.io starter theme for wordpress because it’s an awesome example of how to combine modern web tools for that super clean and powerful feeling. It still feels cutting edge even though it’s now known as Sage. I like that it’s not opinionated and therefor does not try to shoehorn features into it’s core, in this case Bootstrap 3.

But for those of us out there who still need some legacy web features like dropdown sub-menu’s, there’s a rather simple fix by just adding some css and changing a few lines in nav.php

The first thing you’ll want to do implement the changes outlined in Barry Kooij’s article on enabling dropdown on hover. Bootstrap submenu open on mouse over

Once that’s working you’ll want to apply these further edits which allow for the dropdown to have sub-menus:

Change Barry’s hover css from this:

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

To this:

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

Which will keep the dropdown sub-menu’s from displaying when the parent is hovered.

Next we just need to update nav.php in two places.

Change:

if ($item->is_dropdown && ($depth === 0)) {

To:

if ($item->is_dropdown) {

Then change:

$element->classes[] = 'dropdown';

To:

$element->classes[] = $depth === 0 ? 'dropdown' : 'dropdown-submenu';

Lastly, you’ll need to include the css from this bootply: http://bootply.com/86684

That’s it! You should now have dropdown submenu’s enabled.