How can I use mmenu jquery library without breaking core Overlay. Overlay works, but when I do a page refresh (F5) the overlay is blank. When I prevent the mmenu library from loading it works again.

I load the library in hook_preprocess_html in my custom zen theme:

drupal_add_css(drupal_get_path('theme', 'zen_sub') . '/css/mmenu/jquery.mmenu.all.css');
drupal_add_js(drupal_get_path('theme', 'zen_sub') . '/js/mmenu/jquery.mmenu.min.all.js', 'file');
drupal_add_js(drupal_get_path('theme', 'zen_sub') . '/js/zensub.js', 'file');

I then add the menu to the zen theme in hook_preprocess_page through a preprocess variable:

$menu_left = menu_tree_all_data('main-menu');
$menu_left = menu_tree_output($menu_left);
$menu_left = drupal_render($menu_left);
$vars['mmenu_markup'] = array(
      '#markup' =>
        '<div id="menu-left">' . $menu_left . '</div>',

And finally I include placeholders for the menu, as well as the preprocess variable in my page.tpl.php

<div id="header-nav">
 <a href="#menu-left" class="menu-left"></a>
 <?php print variable_get('site_name', "ZenSub");?>
 <a href="#menu-right" class="menu-right"></a>

<?php print render($mmenu_markup); ?>

And Finally this is my js file (zensub.js) to set it all in motion:

(function ($, Drupal, window, document, undefined) {
    Drupal.behaviors.zensub = {
        attach: function(context, settings) {
               offCanvas: {
                   position: "left",
                   zposition: "front"
               header   : true
            }, {
                // configuration object
               classNames: {selected: "active"}


})(jQuery, Drupal, this, this.document);

2 Answers 2


You should consider using Mobile Sliding Menu. It could save you a lot time and pain.

The mobile sliding menu module integrates the mmenu jQuery plugin for creating slick, app look-alike sliding menus for your mobile website.

  • 1
    And as much as I like this answer as it simplifies my development Mobile Sliding Menus suffers from exactly the same problem. Jun 24, 2014 at 19:48

Using the Mobile Sliding Menu, the way I found to deal with stated problem is add custom module with:

function MYMODULE_mmenu_alter(&$mmenus) {

  // Disables left mmenu on some specific pages.
  if ( (arg(0) == 'admin' || arg(1) == 'add' || arg(1) == 'edit' || arg(2) == 'edit') && (arg(2) != 'mmenu') ) {
    $mmenus['mmenu_left']['enabled'] = FALSE;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.