Drupal 7 Bootstrap 3 Hover Menu

Yeah, unfortunately, I am still creating some Drupal 7 sites… but I wanted to post this as it may be a quick fix for some in the future.

For years, when building with Drupal 7 I’ve built a child subtheme of the Bootstrap 3 Starter theme. It’s great. However, sometimes clients expect different behaviors from the menu. Here’s a quick fix for getting your primary nav to expand on hover, and leave the top-menu item clickable:

First, some easy CSS. I put this in a media query, as I hate submenus on mobile:

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

Next, you’ll want to create a new js file somewhere in your theme (I put mine in mytheme/js/custom.js) and link to it in your theme’s .info file:

scripts[] = 'js/custom.js'

Finally, in your newly created js file, drop in the following:

(function ($) {
  $(document).ready(function() {
    BootstrapDropdownToggle();
  });//document ready

  $( window ).resize(function() {
    BootstrapDropdownToggle();
  });
  function BootstrapDropdownToggle() {
    if($('.navbar-toggle').css('display') == 'none'){
      $('.dropdown-toggle').removeAttr("data-toggle");
      $("body").addClass("regularMenu");
    }else{
      $('.dropdown-toggle').removeAttr("data-toggle");
      $("body").removeClass("regularMenu");
    }
  }
}(jQuery));

Voila! You’re now rocking a solid hover menu with the Bootstrap 3 starter theme.