Genesis Simple Mega Menu

Description

Using the Clip

Enabling Genesis Simple Mega Menu options –

1. Go to Appearance > Menus and click on ‘Screen Options’ (top-right).
2. Ensure ‘CSS Classes’ is selected and select ‘Title Attribute’ if adding titles and/or ‘Description’ if adding descriptions.

Adding a mega menu to a top-level menu item –

1. Go to Appearance > Menus and select the required menu.
2. Locate the top-level menu item under ‘Menu Structure’ and show its settings.
3. Add a ‘genesis-mega-menu’ class to the ‘CSS Classes (optional)’ field.

Adding a title –
Add the desired title to the ‘Title Attribute’ field.

Adding an HTML description –
Add the desired code to the ‘Description’ field.

Options

By default, the menu description appears to the right. However, the description can be forced to the left by adding a ‘left’ class to the parent’s ‘CSS Classes (optional)’ field.

(e.g. ‘genesis-mega-menu left’)

By default, mega menus are displayed in 4 columns plus description (optional). However, the number of columns and proportions can be altered by adding an additional class (‘col-3’, ‘col-2’ or ‘col-1’) to the menu item’s ‘CSS Classes (optional)’ field.

(e.g. ‘genesis-mega-menu col-3’)

By default, only next-level menu items are visible in the mega menu and deeper levels are revealed on hover. However, levels can be forced to display by adding a ‘show’ class to the parent’s ‘CSS Classes (optional)’ field.

Notes

‘drop-down-menu’ theme support must be enabled for the Clip to operate. Please refer to http://genesis-accessible.org/2015/07/genesis-2-2-accessibility-changes-and-features/

Mega menus can only be activated on top-level menu items, and remain active only at widths greater than the mobile menu breakpoint.

The Clip was developed on the Genesis Sample Child Theme. Additional styling may be required for other Genesis child themes.