Custom sizes introduction

If you want to use different sizes for your menu, you can easily create a new .css file generated by SCSS.

To create CSS for customized sizes as a default for all your menus, you can override the default SCSS variables.

To create CSS for customized sizes in addition to other menus, start off by creating a new (empty) .scss file. Next, @import the "import" .scss file and @include the "mm_sizing" mixin.

/* in custom-menu.scss */
@import "path/to/src/css/_imp/import";
@include mm_sizing( /* arguments */ );

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

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

Arguments for the mm_sizing mixin

Mixin( arguments ) Default value Datatype Description
1 The $class argument is not a classname but a CSS selector, therefor you must include the preceding dot. If not an empty string, make sure to add the specified classname to the extensions option when firing the plugin.
2 For the actual value, the datatype and a description, have a look at the default variable values reference.
mm_sizing Include this mixin to create a menu with customized sizes.
$class 1 "" String The classname to add to the CSS selectors. If left empty, the new CSS rules will override the default settings.
$width $mm_width 2
$minWidth $mm_minWidth 2
$maxWidth mm_maxWidth 2

Custom sizes for add-ons and extensions

Every add-on and extension that uses sizes, has its own mixin(s) you can @include to change its sizes. For example, if you're using the "positioning" extension.

/* in custom-menu.scss */
@import "path/to/src/css/_imp/import";
@include mm_sizing( /* arguments */ );
@include mm_sizing_right( /* arguments */ );

If you're looking for the mixin(s) for an add-on or extension, check the add-ons and extensions pages.