Mega Menu Overlay Panel

One of the many features of Overlay Panels in GenerateBlocks Pro is its ability to build mega menus.

The basics

Mega menus are created using the Overlay Panels feature in GenerateBlocks Pro.

• Each mega menu is saved as a separate Overlay Panel.
• Mega menus are assigned to parent menu items in Appearance > Menus.
• They are only displayed when using the GenerateBlocks Pro Navigation Block.
• Display behavior (e.g. on hover, click, or toggle click) is controlled via the Navigation Block settings.
• Like all Overlay Panels, mega menus can be conditionally displayed using the Conditions feature.

Video Tutorial

Quick Start

Create a Mega Menu

1. Navigate to GenerateBlocks > Overlay Panels in your WordPress admin.
2. In the Overlay Panel admin choose Mega Menu from the Add New dropdown.
3. in the Block Editor give your mega menu a descriptive name,

Build your Mega Menu with GenerateBlocks

The block editor

The first thing you will notice is that Overlay Panels are built in the regular block editor. No proprietary systems of tools to learn. You can build your mega menu your way using whatever Blocks you want.

The Patterns

To help you get started we have created a series of Mega Menu Patterns available in the Overlay Panels collection.

1. Open the Pattern Library in the GenerateBlocks Panel
2. Select the Overlay Panels Collection tab.
3. Select the Mega Menu Category
4. Choose a Mega Menu to insert.

All Patterns are built using GenerateBlocks Pro and have a small amount of Global Styles to help you customize them as a set.

Once you have finished building and styling you can publish the Overlay Panel.

Attaching the Mega Menu

Once a mega menu has been built and published it needs to be attached to the relevant parent menu item.

1. Navigate to Appearance > Menus
2. Edit the Menu you’re using
3. Edit the Menu Item to attach the mega menu
4. In the Mega Menu drop down choose your overlay panel
5. Save the Menu

Mega Menu Options

For more general information on Overlay panels read here:

Overlay Panels

The right sidebar Overlay Panel Options

The right sidebar is where you will find all the options required to configure your mega menu, including Display Conditions, Placement, Animations and Hover buffer zones.

Category

Categorise your overlay panels for better administration..

Display Conditions

If left as No Condition then the Mega Menu will be displayed everywhere. If however you want to only display the Mega Menu in certain places the you can build a Condition for that.

For more information:

Conditions

Placement of the mega menu

By default a mega menu is placed beneath the bottom left edge of parent menu it is attached to. For most cases this is adequate.

Changing the default placement

You can change the default behaviour with the following options:

1. Placement
   Choose where on the parent element to place the mega menu.
   e.g bottom left, bottom center etc.
   Default: bottom left
2. Position to Parent
   Use a classname to choose a different parent element for positioning:
   • For the parent menu item leave empty ( default )
   • For Site Header Block use: .gb-site-header
   • For Navigation Block use: .gb-navigation

Example: center the mega menu below the site header.

Assuming you’re using the Site Header block you can in the Overlay Panel Options:

1. set Position to Parent to: .gb-site-header
2. set the Placement to: below center
3. set the Hover Buffer to an appropriate value if applicable.

Full Width Mega Menu

If your design requires the mega menu to stretch the full width of the browser viewport:

1. Open the Overlay Panel Options in the editor right sidebar
   • Set the Width Mode to Full Width
2. Select the parent Container Block of the mega menu
   • In the Block styles set the Width to 100%

Hover Buffer Zone

The Hover Buffer Zone is only needed if the Navigation Block displaying the mega menu has its Sub Menu Type set to Hover.

This setting helps prevent the mega menu from closing when the user moves their mouse from the parent menu item to the mega menu — especially when there’s a gap between them.

Example

If your Mega Menu is positioned below the Site Header, and both the Navigation Block and the Site Header Block have 20px of bottom padding, this creates a 40px gap between the menu item and the mega menu.

In this case, you should set the Hover Buffer Zone to 40px to ensure the menu remains open while the user moves the cursor across the gap.

Animation

The Options panel provides 4 options for controlling the Mega Menu animation:

Animation IN / Animation Out

Choose from Fade and Slide animation options.

Animation Duration (MS)

Set the animation duration in MS

Animation Distance

Set the distance in any measurement unit (px, rem etc ) for directional animations

Opening the mega menu

Mega menus behave the same way as a regular sub menu and respects the Sub Menu Type selected in the Navigation Block settings. The options include:

• Hover
• Click Menu Item
• Click Toggle

By default the Mega Menu will hang off of its parent menu item so there is no space between them.

However for some designs a space between the two may be required.

Example 1

Displaying a Mega Menu with the Navigation Block

Once attached to a menu item that item needs to be displayed in a GenerateBlocks Pro Navigation Block on the site.

For more information on creating your Navigation read here:

Navigation

Mega menu overlay panel options

A comprehensive list of Options can be found here.

Mega Menu Option screenshots