Introduction
With the themes option and semi-transparent black and white shades,
changing the color scheme of your mobile menu has always been easy.
In this tutorial, we're going to change the look of our menu by overriding CSS variables.
Just follow the tutorial step by step and you'll have it up and running in no time.
Setup the menu
Lets start with creating a .html file and add the markup for the page and the menu.
If you need help with this part, please read the off-canvas menu tutorial first.
<nav id="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( "#menu" );
}
);
</script>
Add CSS variables
To override the colors used by the plugin, simply override the CSS variables somewhere in your document.
Most commonly, you'd write these styles in a separate .css file,
but for this tutorial we'll write them in an inline <style>.
Note that these styles should be included in the page AFTER the default mmenu .css file.
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
CSS variables can be overriden for each part of the menu (or for each <div>, <ul>, etc).
This example overrides colors for the navbar and the panels.
<style>
.mm-navbar {
--mm-color-background: var(--color-bronze);
--mm-color-text-dimmed: #fff;
--mm-color-icon: #fff;
}
.mm-panel {
--mm-color-background: #fff;
--mm-color-text: var(--color-bronze);
--mm-color-icon: var(--color-bronze);
}
.mm-listitem:after {
content: none;
}
</style>