I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).
On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.
I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).
On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.
Share Improve this question edited Dec 30, 2013 at 10:34 Mani 17.6k13 gold badges81 silver badges102 bronze badges asked Dec 30, 2013 at 9:52 user3050023user3050023 731 gold badge3 silver badges8 bronze badges 1- You can use Media Queries. – Ali Gajani Commented Dec 30, 2013 at 10:01
2 Answers
Reset to default 5I get it, you don't want the users to see the "caret" on the desktop. This could be achieved with minimal amount of Media Queries. It should be something along these lines. I got the Desktop breakpoint Media query code right from Bootstrap 3 Docs.
@media (min-width: 1200px) {
.navbar-nav .caret {
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
}
You can use Jquery hover to activate the drop-down
Try this
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
if($(window).width() > 750)
{
$('b.caret').hide()
}
});
DEMO