Support - mmenu.js

Here you can find some useful tips and tricks and the answers to the most frequently asked questions. Can't find what you're looking for? Try asking your question on stackoverflow.com.

Basic CSS tips

Set a background(-color) on the <body>.

<style>
    body {
        background-color: #fff;
    }
</style>

Hide the menu until the document is done loading.

<style>
    #menu:not( .mm-menu ) {
        display: none;
    }
</style>

Clone for responsive layouts

If you only want to use the mmenu.js plugin for the menu on a smaller screen, don't try to destroy and (re)create the menu when the window resizes. That won't work because the plugin makes a lot of modifications to the HTML that can not be reverted. Instead, you should (let the plugin) clone the menu and use CSS to show and hide either the original or cloned menu using media queries.

<script>
    new Mmenu( "#menu", {
        // options
    }, {
        // configuration
        offCanvas: {
            clone: true
        }
    });
</script>

Use CSS to show and hide the original or cloned menu depending on the width of the screen. Note that all ID's in the cloned menu will be prepended with "mm-":

<style>
    @media (max-width: 1023px) {
        #menu {
            display: none !important;
        }
    }
    @media (min-width: 1024px) {
        #mm-menu{
            display: none !important;
        }
    }
</style>

Deprecated warnings and debug information

The plugin can automatically log deprecated warnings to the console whenever you're using a deprecated option or add-on. Include the "debugger" .js file AFTER the mmenu .js file in your webpage.

<head>
    <script src="path/to/mmenu.js"></script>
    <script src="path/to/mmenu.debugger.js"></script>

Most of the time, the debugger will not only tell you what's wrong, but also how you can fix it. You should probably fix these issues as soon as possible.