Mobile menu

There are several mobile menu options in the Drupal Cloud core that are supported by the DLC theme:

  1. Sidr (menu slides in from the left or right)
  2. Mean menu (menu slides down from the top)
  3. Simple expanding (slides down from the main nav bar)

Which one is right for you depends on how much content you have, how many page levels you have, and the strategy of your content flow.

First, enable the responsive menus module:

  1. Modules > scroll all the way to the bottom
  2. Under User Interface, enable Resposnive menus by clicking the check box
  3. Save configuration.

Sidr (menu slides in from the left or right; recommended for deep sites with multi-level pages):

  1. Modules  > User Interface (scroll down to the bottom) > Responsive menus.
  2. To the right of "Responsive Menu,"  select "Configure."
  3. Select “Sidr” from the drop-down menu.
  4. Under Style Settings, CSS selectors for which menu to modify, enter
    #block-system-main-menu .menu-wrapper
  5. Under Text or HTML for trigger button, enter Menu
  6. Choose:
    1. Position (right or left)
    2. Screen width to respond to (640 recommended)
    3. Displace body content (Yes recommended)
    4. Ignore admin pages (so the mobile menu isn’t deployed on the Drupal admin)
  7. Save configuration.

Mean Menu (menu slides down from the top; recommended for moderate sites with some lower-level pages):

  1. Modules  > User Interface (scroll down to the bottom) > Responsive menus.
  2. To the right of "Responsive Menu,"  select "Configure."
  3. Select “Mean Menu” from the drop-down
  4. Under Style Settings, CSS selectors for which menu to modify, enter
    #block-system-main-menu .menu-wrapper
  5. Under Text or HTML for trigger button, enter "<span /><span /><span />" to display the trigram (a.k.a. "hamburger") icon
  6. Text or html for close button: enter "X"
  7. Choose:
    1. Size of close button: 18x
    2. Position of open/close buttons: right
    3. Screen width to respond to: (840 recommended)
    4. Allow multi-level menus: yes
    5. Ability to expand and collapse children: yes
    6. Text for the expand children button: +
    7. Text for the collapse children button: -
    8. Temporarily remove other classes & IDs: yes
    9. Leave "Ignore admin pages" checked (so the mobile menu isn’t deployed on the Drupal admin).
  8. Save configuration.
  9. By default, the mobile menu text is all CAPS. To fix, add the following CSS rule in your core ccss style sheet:
    .mean-container .mean-nav ul li a {
         text-transform: none;
    }

Simple expanding (expands downwards from the main menu bar; recommended for simpler sites with few or no third-level pages):

  1. Configuration  > User Interface > Responsive Menus > select “Simple expanding” from the drop-down
  2. Check "Use absolute positioning"
  3. Check "Remove other classes & IDs when responded"
  4. Under "Selectors for which menus to responsify," enter "#block-system-main-menu .menu-wrapper"
  5. Under "Text or HTML for the menu toggle button, enter "☰ Menu"
  6. Save configuration.