Tips and tricks

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

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

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

2. Don't set a height on the <html />. If you need a <div /> to be (at least) 100% height, set the (min-)height to 100vh.

<style>
   #my-div {
      height: 100vh;
   }
</style>

3. Hide the menu until the document is done loading.

<style>
   #my-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( "#my-menu", {
      // options
   }, {
      // configuration
      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: 600px) {
      #my-menu {
         display: none !important;
      }
   }
   @media (min-width: 601px) {
      #mm-my-menu{
         display: none !important;
      }
   }
</style>

The plugin assumes every <a /> element in the menu should be clickable, it therefor adds the link to open a submenu next to it. If you replace the <a /> with a <span />, the entire menu item becomes clickable:

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><span>About us</span>
         <ul>
            <li><a href="/about/history">History</a></li>
            <li><a href="/about/team">The team</a></li>
            <li><a href="/about/address">Our address</a></li>
         </ul>
      </li>
      <li><a href="/contact">Contact</a></li>
   </ul>
</nav>

Fixed or sticky elements

If your page contains elements that have position: fixed; or position: sticky; that suddenly seem to disappear when opening the menu, have a look at the fixed elements add-on.