Now if I go to the homepage and resize the browser, the menu should change to become responsive. So all you need to do is find the main wrapping element for your menu.īecause I’m using Omega, I’ll add #block-system-main-menu into the selector text-area. main-menu will not work because every theme defines block and menu elements differently. We need to let the module know about the menu and we do this by adding a jQuery selector into the “Selectors for which menus to responsify” text-area. The most important option on this page is the CSS/jQuery selector. First, go to Configuration -> “Responsive Menus”.Ģ. Now that we have everything installed, let’s go to the module’s configuration page and configure the “Simple 3-bar expanding” style.ġ. Once you’ve downloaded everything, for now, just install the Responsive Menus module and enable Omega’s Ohm demonstration subtheme. If you use Drush, run the following command:ĭrush dl responsive_menus jquery_update omega How to Setup Simple 3-bar Expanding Menuīefore we begin, go download Responsive Menus, jQuery Update and Omega.Make sure you use a responsive theme and not the default Bartik, because the menus won’t become responsive. In this tutorial, we’ll look at how to setup both styles using the Omega theme. The “Mean Menu” style, on the other hand is fancier but it requires jQuery 1.7+ and this means you’ll have to install jQuery Update. The “Simple 3-bar expanding” is the easiest to setup. The module offers two responsive menu styles: UPDATE: The 7.x-1.x-dev branch ships with three styles. A few of the popular base themes support them out of the box, if the theme you’re using doesn’t, then take a look at the Responsive Menus module. Well first, check if your Drupal theme offers responsive menus. So what solutions are out there for Drupal sites? You don’t have the luxury of a mouse cursor when you’re on a mobile or tablet device, instead you navigate by using touch. Users will have a tough time navigating your website if the menu hasn’t been optimised for mobile devices. When you’re building a Drupal website that is responsive, it’s vital that the main menu is responsive as well.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |