Beaver Builder Mega Menu

If your header already lives in Beaver Themer, this menu is for you; if not, think twice

Building a mega menu usually ends in one of two places: a third-party plugin with a steep learning curve and limited styling, or an ordinary dropdown that can't show everything you offer. Beaver Builder Mega Menu starts from a different idea: any saved row in Beaver Builder becomes a mega menu panel.

It is meant for people who already work with Beaver Builder and build their header with Beaver Themer. That is where it works and where it is backed. If your theme lets you insert a shortcode or a widget in the header position, you may be able to call a saved row with Beaver Builder's layout-insert shortcode, but that route is not officially tested: if something fails, you are on your own. And if you don't use Beaver Builder, this plugin is of no use to you.

Any saved row becomes a panel

The logic is simple: you design a row in Beaver Builder and pick it as the content of a menu item. It supports full-width or fixed-width rows, with backgrounds and effects. Whatever you can lay out with the builder (columns, images, text, buttons) can appear on hover.

The module is called Mega Menu and shows up in the standard modules, under the Action section. You drag it into your Themer header and add the items from its General tab.

Three kinds of item in the same menu

Not everything deserves a huge panel. Each item can be one of three types:

• Mega menu: you choose one of your saved rows.
• Dropdown: you choose a WordPress navigation menu created under Appearance > Menus.
• Simple link: just text and a URL.

That way, a section with two subpages can be a classic dropdown, and the big panel is saved for the part of the site with a lot to show. Styles are set separately for the top level, the dropdowns and the mobile menu: color, spacing, alignment and typography.

You won't see the mega menu on mobile, and that is by design

On small screens the mega menu doesn't appear, because it would be clunky and overwhelming. Instead, a sliding off-canvas menu is shown. For that you need to create a separate WordPress menu with all the links you want on mobile, and choose it in the module. You can change the icon, the side it slides in from, how much of the screen it covers and the close button.

Tablets depend on Beaver Builder's global breakpoint: with the default value they use the mobile menu, and if you lower it to 767px they will see the mega menu. That setting is global and affects every layout. The mobile menu isn't visible in the editor either: you have to publish and view it at a small size, and it's normal to tweak it a couple of times.

Details worth knowing before you start

• After editing, you need to refresh the page for the mega menu to show on hover. It is the usual reason the dropdowns work and the mega menu doesn't.
• It is not a native WordPress navigation element, so it doesn't get the active-item class. To style a specific item, you can assign a class to the parent.
• A menu like this doesn't solve the content: if your rows are empty or badly thought out, the panel will be too.

Frequently asked questions about Beaver Builder Mega Menu

Does it work with any theme?

It is designed for Beaver Themer. On other themes it is only a possibility if they let you insert a shortcode or a widget where the menu goes.

Can I mix mega menus and regular dropdowns?

Yes, in the same module, item by item.

Is the mega menu visible on mobile?

No. On small devices a side menu is shown, which you configure with a separate WordPress menu.

Can I design the panel with any Beaver Builder layout?

Yes, any saved row, full-width or fixed, can be a mega menu.

Why doesn't it open on hover?

First, refresh the page after editing. It is a required step.