Override variables introduction

You can customize the look of the menu by overriding the default SCSS variable values (or actually by predefining them). To do so, start off by creating a new (empty) .scss file and set the variables you need changed. Next, @import the needed .scss files. For example, if you want to change the height of the menu items.

/* in custom-mmenu.scss */
$mm_btnSize: 50px;
@import "path/to/src/css/jquery.mmenu";

Now all you need to do, is run Sass from the command line.

sass path/to/custom-mmenu.scss path/to/custom-mmenu.css

If you're looking for the variables for an add-on, check the add-ons pages.

Available SCSS variables

Variables Default value Datatype Description
Animations
$mm_transitionDuration 0.4s CSS value The duration of all transitions.
$mm_transitionFunction ease CSS value The function to use for all transitions
Colors
$mm_backgroundColor #f3f3f3 CSS value The background-color of the menu.
$mm_borderColor rgba(0,0,0,0.1) CSS value The border-color of the menu items.
$mm_dimmedTextColor rgba(0,0,0,0.3) CSS value The text-color of dimmed out elements in the menu.
$mm_emphasizedBackgroundColor rgba(255,255,255,0.5) CSS value The background-color of emphasized menu items.
$mm_highlightedBackgroundColor rgba(0,0,0,,0.05) CSS value The background-color of highlighted menu items.
$mm_navbarColor rgba(0,0,0,0.3) CSS value The text-color of dimmed out elements in the menu.
$mm_textColor rgba(0,0,0,0.75) CSS value The text-color of the menu.
Sizes
$mm_btnSize 40px CSS value The height of the menu items.
$mm_fontSize 14px CSS value The font-size of the menu.
$mm_listitemIndent $mm_padding*2 CSS value The left indent of the menu items.
$mm_listitemPadding $mm_padding CSS value The padding of the menu items.
$mm_padding 10px CSS value The padding for elements throughout the CSS framework.
$mm_panelPadding $mm_padding*2 CSS value The padding of the panels.
$mm_subopenWidth $mm_btnSize CSS value The width of the buttons that open submenus.
$mm_subpanelOffset 30% CSS value How far a panel slides out to the left when opening a subpanel as a percentage. From 0% (not moved) to 100% (fully moved out).

Note that -although included and turned on by default- the "offCanvas" and "scrollBugFix" add-ons have their own set of SCSS variables, documented on the add-ons pages.