Custom Menus

This hack removes most of the default styling in the menu module and fullscreen menu module so you can apply your own custom styles.

Classes

  • custom-menu

Additional Classes

For the “Centered” menu layout, you can add one of these additional classes to align the menu to the left or right side of it’s container.

  • align-right
  • align-left

Usage

Add the class custom-menu to the fullwidth menu module or the menu module. Then add custom padding to the menu links, dropdown container, dropdown links, etc. inside the Custom CSS box.

Use with

The Fullwidth Menu Module or the Menu Module.

Design

For the centered menu layout, customize the look of the menu further by adding the following CSS variables the Element’s Custom CSS Box.

--menu-container-background:
--menu-width:
--menu-max-width: