Smarter Web Solutions


Drupal Bootstrap 3 multilevel submenus with hover

Smartmenus Bootstrap 3 multilevel dropdown navbar with hover

There has been a lot of discussion in Drupal 7 Bootstrap theme project issue queue relating to revealing submenu's on hover instead of click event which is the default Bootstrap behaviour. The other thing that bothered a lot of people including myself was "dead" parent menu items that wouldn't navigate to a page or node as is the default Drupal menu behaviour as well as, behaviour most people are used to and still expect it at least on desktop devices. Indeed I was the one to originally start the discussion and help find a workable solution in Bootstrap 7.x-2.x issue queue.

Then Bootstrap 3 was released with even more reasons to love it and an extra reason to hate its default menu behaviour - .dropdown-submenu support was removed. Predictably Drupal's Bootstrap theme project issue queue reactivated on the matter just as it did all over the web for non Drupal themes. We cannot nor should we expect Drupal Bootstrap theme project managers to tackle the issue as they are understandably so trying to stick with default Bootstrap behaviours, and they are volunteers after all. But there is a solution I found that I am happy to share, and it is surprisingly simple to implement.

How to create a responsive mobile menu for Omega subtheme

Responsive mobile Menu Demo image

Its been over a year now since I started using responsive web design exclusively on all new websites and Omega Framework has been my base theme of choice. Its truly awesome but Omega, like most popular Drupal base themes doesn't come with drop down or responsive menu out of the box. Some may view this as a shortfall but, I prefer to start with as little base code as possible. In this tutorial I will explain how you can easily create a hard coded responsive drop down menu for Omega subthemes that will turn into a toggle menu on small screens, similar to that one on Facebook mobile. You can see this menu in action if you check out our own main menu above.