Styling introduction

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: 50px;
    }
</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 and extensions might have their own set of CSS and SCSS variables.

Available CSS variables

Variables Datatype Default value Description
Colors
--mm-color-background CSS color #f3f3f3 The background-color for the menu.
--mm-color-background-emphasis CSS color rgba(255,255,255,0.4) The background-color for emphasized listitems.
--mm-color-background-highlight CSS color rgba(0,0,0,,0.05) The background-color for highlighted listitems.
--mm-color-border CSS color rgba(0,0,0,0.1) The border-color for navbars, listitems, etc.
--mm-color-button CSS color rgba(0,0,0,0.3) The color for buttons.
--mm-color-text CSS color rgba(0,0,0,0.75) The text-color for the menu.
--mm-color-text-dimmed CSS color rgba(0,0,0,0.3) The text-color for dimmed out elements in the menu.
Sizes
--mm-lineheight CSS number 20px The line-height for the menu.
--mm-listitem-size CSS number 44px The height for the listitems.
--mm-navbar-size CSS number 44px The height for the navbars.
--mm-toggle-size CSS number 34px The height for toggles.

Note that add-ons and extensions might have their own set of CSS variables.