How can I remove caret on Bootstrap 3 menu and show dropdown on hover?

Question

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.

Answer 1

I 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;
  }
}

Answer 2

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