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.