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.
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 🙂
its working very nice thanks
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! 🙂
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.
what can i do if i’ m using the wlaker class to show my menu?
please help me!!
This helped me out a lot. Thanks!!
Thanks a lot! That helped me for real… 🙂
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.
If you implement default (:)hover behaviour, touch devices will triggger the hover state on the first toch and will trigger click on the second touch.
its kind of not working, coz when i enables this, on the fist click it show the menu and redirected to parent link soon 🙁
also the hover menu position is not good too, i prefer relative instead of absolute in the mobile device ..
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?
Scratch that, I spoke too soon! Works great.
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.
This post is almost a year old, I didn’t work at Yoast at the time I wrote this post.
Thanks for posting this.
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?
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?
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.
Thanks barry, it helped me a lot
Thank you so much. This was very helpful. Idk why roots defaults to this behavior.
/*make the menu sub-menu items drop down on mouse hover */
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
margin: 0;
}
Thanks you, Sajid.
Hi Barry,
This is working great for me on desktop, but on mobile it now always goes to the parent links page before I get a chance to select one of the child items when they drop down. Any idea how to overcome this?
Thanks
A
Thank you………its really helpful for beginners
Thank you so much.. Its awesome
Is there any real solution as for big resolutions menu should be hovered and for small devices menu should be toggled (click-able).
This should work out of the box because your mobile browser should trigger the hover statement on click.
Hi Barry,
when i added sub menu that time main menu not working.iam using one page wp theam newave. can you help me?
Did you ever find a solution for the Newave theme?
exactly what I was looking for. well done.
Thanks, helped alot.
Thank you so much. This was very helpful.
On phones sub menu is hiding when I mouse over on the main menu. Is there any way menu can push other content down. Like it does normally but when I apply mouse over it start hiding menu instead pushing the other content down.
i want to display my index page.there i have 3 menu items each have sub items and these have subitems and so on .i want to display them in toggle dropdown menu with mouse hover.when i move mouse cursor it should open subitems and close automatically when i move out.the menu should be vertical.please asssist me as i am new to bootstrap..
Thanks a lot buddy. I found lots of menus but my issue was to make dropdown display on hover not click and thank you this code.
Thanks a lot buddy. I found lots of menus but my issue was to make dropdown display on hover not click and thank you for this code.
Thank you so much, Very helpful.
hey this is krish
i did this and it came out oswm
but when i goto the mobile devices i dont want this hover
i nedd dropdown for my mobiles
@media (min-width:800px){
.dropdown:hover .dropdown-menu{display:block; }
}
which works for desktop and not for mobiles
[…] 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 […]
Thanks for the excellent tip.
I have multilevel sub-menus. And when I do mouse-hover to the parent menu, all sub menu (child of child) also start displaying.
Please let me know, if there is any solution for multi level sub menus, that is child of child relationship.
Thanks
Thanks a lot for your help! You saved my night 🙂
i wnt drop down nav menu bar with &sub menu responsive in bootstrap so plzzzzzzzzzzzzz
Thank you so much
Thanx. It works nicely.
Good day.
Thanks for your posts, very insightful.
Please how can I get divi toggle to open on mouseover instead of mouse click?
What css code can I use?
Thanks
Conheça os serviços de dedetização 24 horas.