Bootstrap Menu: Dropdown On Hover For Desktop Only

I have managed to use a bit of Javascript to get Bootstrap dropdown menus to expand on hover, but the effect makes the page unnavigable on mobile. I have tried to use the JS soluti

Solution 1:

You can use the Responsive Utilities Classes to hide the dropdown when the user are on a mobile version.

http://getbootstrap.com/css/#responsive-utilities

...
<li class="dropdown visible-md visible-lg">...</li>
...

Solution 2:

If you want to just add a style only for the large screen you can do like so:

@media handheld, only screen and (min-width: 767px) {
    a:hover{ color: red }
}

Or if you want you can use max-width for smaller screens only.

---

If however you want to detect with javascript if it has passed the border, you have to hack it by using Bootstrap Responsive Utilities' classes:

<!-- Dirty hack to detect mobile collapse and kill hover --><divid="js-detect-mobile-collapse"class="visible-xs"></div>

and the javascript:

do_detection(){
    if( $('#js-detect-mobile-collapse').css('display') != 'block'){
        // do something for mobile only
    } else{
        // do something for large screens only
    }
}

It's a crappy hack, but I couldn't find anything more. Also, you can use window resize to make sure you update values upon changes:

$( window ).resize(function() {
    do_detection();
});