Tips and tricks - mmenu.js support

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>