Styling

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.