By default bootstrap drop down opens on click and parent item link don’t work anymore as the parent item simply used for triggering drop-download. But the following js code will help you to open drop down on hover and also will activate the link with parent menu item.
<script>
jQuery(function($) {
if($(window).width()>769){
$('.navbar .dropdown').hover(function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
$(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp();
});
$('.navbar .dropdown > a').click(function(){
location.href = this.href;
});
}
});
</script>or you can use following CSS:
<style>
@media only screen and (min-width:769px) {
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative !important;
}
.dropdown-submenu>.dropdown-menu {
top: 0 !important;
left: 100% !important;
margin-top: -6px !important;
margin-left: -1px !important;
border-radius: 0 !important;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block !important;
}
.dropdown-submenu>a:after {
display: block;
content: "\f105";
font-family: 'FontAwesome';
margin-top: -18px;
right: 15px;
position: absolute;
font-weight: 300;
}
}
</style>
WP Eden is a one stop WordPress resource collection including WordPress Themes, WordPress Plugins, Tips and Tutorials.
Realy great tip 🙂 Thanks for that
Just what I needed! Thanks.
thanks! very nice solution.
really great 🙂 thanx
thanks 🙂
Thank you! A little change 🙂
$('.navbar .dropdown > a').click(function(){ return false; });add the open class to active menu
$('.navbar .dropdown').hover(function() { $(this).addClass('open').find('.dropdown-menu').first().stop(true, true).show(); }, function() { $(this).removeClass('open').find('.dropdown-menu').first().stop(true, true).hide(); });You are just genius. Thank you!
Thank u
So useful!! I really appreciate you to share it
Hey thanks for the snippet, I have been searching from sometime – how to make that parent item clickable.
Thanks Again
Anirudh
thanks a lot! 🙂
This is obviously won’t work on mobile. Any solution for both desktop and mobile?
Please check now, code is updated, it will work now for mobile device too.
This is great for desktop but misses the point on mobile … is there a way to
1. Have the parent link be active and
2. Have the sub menu items appear when tapping the parent link …
For Mobile
1 tap opens the sub menu items
2 taps and you get taken to the link
For desktop
Hover reveals sub items and clicking takes you to the desired location …
Code is updated, it will work now for mobile device too.
Don’t you need some sort of resize detector? This dosen’t seem to work if the page is resized.
Refresh page after resize.
Hi Thanks, I am using this on the EWA theme on WAMP. Can this work on any theme?
Which file do I include this code in ans where in the file?
Thanks
Yasuke
The js code, you can add it in footer.php, and the css, you can add it in style.css if your active theme.
Thank you so much, it worked fine!
It worked like a charm and out of the box, however IMHO the delay times are little slow
Finally, one that work right…
Thank you so much. Best solution WP Eden and Matthew together.