• Skip to fullPage navigation
  • Skip to primary navigation
  • Skip to main content
Krolyn Studios

Krolyn Studios

Precoded Clips for WP Clips

  • Precoded Clips
  • Demos
    • Full-Window Genesis Responsive Slider
    • Genesis Responsive Slider Custom Classes
    • Genesis Responsive Slider V-Middle Excerpt
    • Genesis Simple Mega Menu
    • Genesis Alvaro Trigo fullPage
    • Genesis Bgrd Featured Image Effects
    • Genesis Isotope Filters
  • WP Clips

Genesis Simple Mega Menu

v2.0 / Demo
Dwnlds1968

This Clip enables a class-activated mega menu (including optional title and HTML description) on Genesis child themes with ‘drop-down-menu’ theme support.

Category: Free Clips
  • Download
  • Setup
  • Comments
Requirements
WP Clips - download and install latest version

Genesis v3.0+ (by StudioPress) + most child themes with ‘drop-down-menu’ theme support


Installation / Updates
  1. Download the Precoded Clip zip file.
  2. clip-genesis-simple-mega-menu.2.0.zip

    Download Clip
  3. Go to Settings > Clips in WordPress admin and install via 'WP Clips Manager'; OR unzip and upload via FTP (or file manager) to the /wp-content/clips/precoded/ directory.

Credits / Sponsors
Clip authored by Jon Barratt / Krolyn

Inspired by Bill Erickson’s Mega Menu Using Post Meta

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.

Reviews

There are no reviews yet.

Cancel reply

Your email address will not be published. Required fields are marked *

  • WP Clips
  • WP Clips Multisite
  • Krolyn’s ClipBank

© Copyright 2015 Krolyn Studios · Privacy Policy · Contact