Mega Menu: How to Add, Edit and Customize

A Mega Menu is an expanded dropdown for your navigation that holds far more than a plain menu — items arranged in columns, images, buttons and any other elements that wouldn’t fit in a simple list. It’s the ideal way to present a large catalog or a content-rich site without overwhelming the header.

Shock includes an exclusive Mega Menu feature that works as a custom post and integrates with the menus you register in WordPress. That means you can attach a Mega Menu to any item in your Navbar in a flexible, no-code way. And because each Mega Menu is designed with Elementor, you can drop in any widget you like.

Tip

If you imported the Demo Data, several ready-made Mega Menus are already in the list — you only need to edit their content and attach them to your menu items.

Create and design a Mega Menu

1. In the WordPress dashboard, go to Shock » Mega Menu.

2. Click Add New to create one, or Edit an existing item in the list.

3. Give it a clear title so you can recognize it when attaching it to a menu item.

4. Click Edit with Elementor and design the dropdown — use columns, images, and any Shock Core widgets — then Publish.

Attach a Mega Menu to a menu item

Once your Mega Menu is designed, link it to an item in one of your navigation menus.

1. Go to Appearance » Menus.

2. In the top-right corner, expand Screen Options and tick CSS Classes. This reveals the CSS-class field on each menu item.

3. Under Select a menu to edit, choose the menu you want and click Select.

4. In Menu structure, expand the menu item you want the Mega Menu to open from. You’ll see a Mega Menus dropdown — select the one you created.

5. In that item’s CSS Classes field, type has-megamenu.

6. Click Save Menu.

Note

If the Select a menu to edit option or the per-item settings don’t appear, you probably don’t have a menu created yet. Build one first under Appearance » Menus, then return to attach the Mega Menu.

Caution

The has-megamenu CSS class is required for the dropdown to render as a full-width Mega Menu instead of a standard submenu. If your Mega Menu shows but looks like a narrow dropdown, double-check that the class is spelled exactly has-megamenu on the correct menu item.

Related Navbar · Creating Pages and Homepage