Custom colors

With the themes extension and semi-transparent black and white shades, changing the color scheme of your mobile menu has always been easy. As of version 7.1 the mmenu.js plugin uses CSS variables for all colors (and sizes), which makes customizing the colors even easier and much more flexible.

Create the menu

Lets start with setting up the HTML and fire the plugin. If you need help with this part, please read the off-canvas menu tutorial first.

<nav id="my-menu">
   <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About us</a></li>
      <li><a href="/contact/">Contact</a></li>
   </ul>
</nav>
<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         new Mmenu( "#my-menu" );
      }
   );
</script>

Add CSS variables

To override the colors used by the plugin, simply override the CSS variables somewhere in your document. Note that these lines of CSS should be included in the page AFTER the default mmenu CSS files.

The example below will change the background color to #eee and the text color to #111 for all parts of the menu. For a complete overview of all available CSS variables, have a look at CSS documentation.

<style>
   .mm-menu {
      --mm-color-background: #eee;
      --mm-color-text: #111;
   }
</style>

Mix it up

Because CSS variables are cascading, they can be overriden for each part of the menu (or for each <div>, <ul>, etc). The example below overrides colors for the navbar and the panels.

<style>
   .mm-navbar { 
      --mm-color-background: #4bb5ef;
      --mm-color-text-dimmed: #fff;
      --mm-color-button: #fff;
   }
   .mm-panel { 
      --mm-color-background: #e0f2fc;
      --mm-color-text: #222;
      --mm-color-button: #4bb5ef;
   }
</style>

Next tutorial:
Dynamic content