How to make bootstrap dropdown works on hover

Question

How to make bootstrap dropdown to work with hover on resolution greater than 767px.

I saw this SO Question How to make twitter bootstrap menu dropdown on hover rather than click , which suggesting this

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

But the problem is, I have to disable the click effect, only on resolution greater than 767px. Ie below this resolution (especially in mobile devices), it has to work on click which the bootstrap usually does.

What i tried so far

make the css to this

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

and change the

<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"/>

to

<li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle=""/>

Now it disable the click in resolution > 767px, and also works the click event on resolution < 767px here the problem is that it doesn't work that perfectly like before on resolution < 767px.

It's the closest I can come, any help can be appreciated.

Answer 1

you can wrap your css code with media query:

@media (min-width: 768px) {
    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }
}

To disable click:

$('.nav .dropdown > a').click(function(event){
    event.preventDefault();
});