Responsive Bootstrap hover dropdowns

Bootstrap 3 Responsive Hover Dropdowns
This adds hover behaviour to bootstrap’s dropdown menus using the built in ‘open’ class.
We will do it based on a responsive breakpoint.
In this example the hover behaviour should only happen if the screen is wider than 600px.
At the end we reset to the default behaviour on small screens.


        // Show menus on hover
        function hoverMenu(){
          var breakpoint = 600;
          var dropdown = $('ul.nav li.dropdown');
          if ( $(window).width() > breakpoint ){
            dropdown.hover(function() {
              $(this).addClass('open');
            }, function() {
              $(this).removeClass('open');
            });
          } else {
            // Remove hover behaviour
            dropdown.unbind( "mouseenter mouseleave" );
          }
        }

        //Do it!
        $(document).ready(function(){
          hoverMenu();
        });
        $(window).resize(function(){
          hoverMenu();
        });

If you use a debounce function I recommend you use it as you may not want the screen width to be calculated per pixel when the screen size changes.

...
        //Do it!
        $(document).ready(function(){
          hoverMenu();
        });
        $(window).resize(function(){
          debounce(hoverMenu(), 300);
        });