0

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.

Community
  • 1
  • 1
Sobin Augustine
  • 3,639
  • 2
  • 25
  • 43
  • Duplicate of http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click?rq=1 – Jaison James Sep 03 '14 at 07:51
  • Do you realize that there are tablets/phablets that are touch-only and >=768px wide? Your premise is flawed, IMHO. – cvrebert Sep 04 '14 at 01:33

1 Answers1

0

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();
});
George G
  • 7,443
  • 12
  • 45
  • 59