The mmenu.js plugin uses CSS variables for most of its sizing and styling. The default CSS variables can be overridden to customize your menu without having to make changes to the plugin.
<style>
.mm-menu {
--mm-listitem-size: 56px;
}
</style>
Because CSS variables are cascading, they can be overriden for each part of the menu. Learn how to do so in the CSS variables tutorial.
Note that add-ons might have their own set of CSS and SCSS variables.
Available CSS variables
| Variables | Datatype | Default value | Description |
| --mm-color-background | color |
#f3f3f3 |
The background-color for the menu. |
|---|---|---|---|
| --mm-color-background-emphasis | color |
rgba(255,255,255,0.4) |
The background-color for emphasized listitems. |
| --mm-color-background-highlight | color |
rgba(0,0,0,,0.05) |
The background-color for highlighted listitems. |
| --mm-color-border | color |
rgba(0,0,0,0.1) |
The border-color for navbars, listitems, etc. |
| --mm-color-icon | color |
rgba(0,0,0,0.3) |
The color for buttons. |
| --mm-color-text | color |
rgba(0,0,0,0.75) |
The text-color for the menu. |
| --mm-color-text-dimmed | color |
rgba(0,0,0,0.3) |
The text-color for dimmed out elements in the menu. |
| --mm-lineheight | pixels |
22px |
The line-height for the menu. |
| --mm-listitem-size | pixels |
50px |
The height for the listitems. |
| --mm-navbar-size | pixels |
50px |
The height for the navbars. |
| --mm-toggle-size | pixels |
34px |
The height for toggles. |