Clickable parent Nav Dropdown Menu items with Roots Theme & Bootstrap

Dropdown menus on Roots Theme or Bootstrap websites does not include the functionality to move your mouse pointer over a navigation bar dropdown menu (parent) and have it display the dropdown menu block with the menu’s children links.

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:

 

Nav.php

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

 

Remove the data-toggle="dropdown" part.

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