Menu Styling

Under Mega Menu > Menu Themes you’ll find a theme editor which allows you to edit the appearance of your menus. Max Mega Menu has one built in theme (Default) but you can create your own themes.

The Theme Editor will let you modify all aspects of the Menu styling, including the font, color and size (height) of your menu’s.

Creating a new theme

To create a new theme, go to Mega Menu > Menu Themes and click the ‘Create a new theme’ link (or alternatively, scroll to the bottom of the page and click ‘Duplicate Theme’). Make any adjustments and click the save button.

Applying a theme to a menu

To apply your new theme to a menu, you will need to go back to Appearance > Menus, and select your new theme from the ‘Theme’ dropdown in the Mega Menu Settings.

Theme Editor Sections

The theme editor is split into 6 collapsable sections.

Descriptions of each setting can be found on the theme editor page.

General Theme Settings

These settings change the overall behaviour of the menu, or affect multiple aspects of the menu. For example, enabling Hover Transitions will apply a hover effect to the Menu Bar links, links inside Mega Menus and links inside Flyout Menus.

These settings alter the style of the top menu bar and the menu items found within the top menu bar.

Mega Menus

Use these settings to change the appearance of “mega menu” sub menus.

Related: We have an article explaining how to change the width of a mega menu.

Flyout Menus

Use these settings to change the appearance of “flyout” sub menus.

Mobile Menu

These settings apply to the menu when it is viewed on mobile (i.e. when the screen width is below the Responsive Breakpoint width).

Custom Styling

You can enter your own menu styling into the Custom CSS editor. This CSS will be compiled along with the theme settings whenever the theme is saved.

Theme Editor Screenshot


Related Articles