Bootstrap submenu open on mouse over

When developing a custom theme I love using Roots Theme. One of the reasons I do is because of it’s integration of Twitter’s Bootstrap. The only thing I always change is the menu’s behaviour, I want it to open on mouse over instead of on click.

The Bootstrap menu

Bootstrap comes with a cool CSS menu which support submenu’s out of the box. The only behaviour I almost always need to change is when the submenu should be displayed. By default the submenu is displayed when clicked on on it’s parent menu item, but I want it to open when mouse hovering the parent menu item. Luckily this can easily be done by adding the follow code to your CSS file:

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

The caret

An element I almost always hide is the caret (the little arrow head pointing downward). Hiding the caret can be done by adding the following line to your CSS file:

.nav .dropdown-toggle .caret { display:none; }

Let the parent menu item link to a page

Now that your submenu opens on hovering the parent menu item it’s most likely you want to let your parent menu item link to its own page. This can be done by removing the data-toggle attribute from the <a> element. If you’re using Roots Theme like me, you can remove the data-toggle attribute in /lib/nav.php on line 28.

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

// NEW
$item_html = str_replace('<a', '<a class="dropdown-toggle"', $item_html);

As you can see I’ve also removed the data-target attribute since it has no use any more now the data-toggle attribute is gone.

That’s all

Thats all, now you’ve got a Bootstrap menu that opens subitems on mouse over. I love to hear if this helped you and feedback is much appreciated of course.

Follow me

Barry Kooij

Barry is a WordPress deleveloper and is the author of various WordPress plugins

In his free time, Barry likes giving back by contributing various opensource projects. He also likes to visit and speak at WordPress meetups and WordCamps and is the organiser of the Dutch WordPress meetup in Tilburg.
Follow me

Latest posts by Barry Kooij (see all)

18 thoughts on “Bootstrap submenu open on mouse over

  1. Thanks for writing this up. I do the exact same thing on pretty much every site, although I just end up taking the caret out of the walker, too, instead of hiding it with CSS.

    You should post this on the Roots Google Group :)

  2. Hi Ben,

    Thanks for your comment. I agree that removing the caret out of the walker is cleaner, I’ll add this to my post!

    I’ve posted this on the Roots Google Group! :)

  3. Heya i’m for the first time here. I came across this board and I find It really useful & it helped me out much. I hope to give something back and help others like you aided me.

  4. what can i do if i’ m using the wlaker class to show my menu?
    please help me!!

  5. This helped me out a lot. Thanks!!

  6. Thanks a lot! That helped me for real… :)

  7. Helpful technique. I implemented this and started asking myself questions regarding touch devices and the inability to hover to show the sub menu. Any thoughts around this.

  8. This works great, but there seems to be an issue when running it on mobile devices in collapsed mode. Do you have any suggestions for how to apply a media query to revert back to the default behavior when running in a small screen?

  9. Hi,

    Why do you talk about using Bootstrap to develop a custom theme when you at Yoast Central Incorporated use Genesis for your framework? I am trying to figure out what benefit there is to using Bootstrap, which is how I came across this post of yours.

    Also – doesn’t using submenus score low, as it were, for search engines? I thought a good approach to getting search engines to liking pages was to treat them as though they’re sight impaired and that submenus are bad for sight impaired people.

  10. Thanks for posting this.

  11. Hi Barry,

    Thanks a lot. It’s very helpful for me.
    This code works well on desktop view but its not working well on mobile view. I need onclick dropdown for mobile view. Could you please suggest me?

  12. I’m using the roots theme and in the admin control panel, click menus. My pages do not reflect the parent child formation, I have to manually move pages under each parent, even though with in the page I set child pages. Anyone else having this issue?

  13. This is really a very helpful technique but right now i am not using root themes so not able to connect top menus with its parent post/category. Do you have any general option/s to do that. That would be as useful as this one. Thanks barry for posting this useful information for us.

  14. Thanks barry, it helped me a lot

  15. Thank you so much. This was very helpful. Idk why roots defaults to this behavior.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>