How to add mega menu panels

You are here:
Estimated reading time: 2 min

There are 2 types of Mega Menu panels: Global Section based and Child menu based.

Global Sections Mega menus

These are blocks of elements built with Elementor.

To create a new mega menu section:

  • Access Rey Theme > Global Sections and click on Add New (top button)
  • Select “Mega Menu” in the Type option
  • Publish the page
  • Hit Edit with Elementor
  • Add elements and save the page.

Assigning mega-menu panels to menu items:

First, access Appearance > Menus and create a new menu, and menu items in it. Keep in mind that this method does not require child menu items.

After the menu items content fields, you’ll notice a toggle with the label Mega Menu. Make sure to assign the menu as Main menu as theme location in the bottom checkboxes, or check the “Support Mega menu” checkbox at the bottom. Otherwise the checkbox will not be shown.

Enable and select Global Sections as Mega Menu type. You’ll basically unlock a new select list with the available global sections.

Enable Mega Menu and select Global Sections as type of the Mega menu.

Child menus panels

This will list all the child menu items of a top level item, hierarchically, based on the number of columns you select.

So, to enable access Appearance > Menus and create a new menu, and menu items in it. Make sure to assign the menu as Main menu as theme location in the bottom checkboxes. Otherwise the mega menu options will not be shown.

After the menu items content fields, you’ll notice a toggle with the label Mega Menu. Enable it and you’ll notice a lot of new fields. Choose “Menu Columns” and select on how many columns to display.

Markup 2020-05-19 at 23.37.37.png
Make sure to choose Menu Columns.

Make sure to add a hierarchical menu structure eg: https://d.pr/i/dYYUML .

Important:

  • Only the “Header Navigation” element is compatible with Mega menus (not other Menu elements);
  • Mega menu options are visible only for 1st level menu items in the Main Menu display location menu eg: https://d.pr/i/TWw5S8 .

Frequently asked questions:

** Can add same mega menus from other demos?

Yes. Try to make use of the Rey’s template library to import other mega menus designs eg: https://d.pr/v/f82EFN .

** Can i change the background of the submenu panel?

Yes. Click on the “Sub-panel styles” to enable the styling options and simply choose a background color.

** Can i change/reset the padding of the submenu panel?

Yes. Click on the “Sub-panel styles” to enable the styling options and edit the padding field.

** Are there more styling options?

Yes. Edit the Header global section with Elementor and access the Header Navigation element. There are plenty of options inside.

** Why does some mega menu content is not showing ok on mobiles?

I strongly recommend not to use global sections for mobile menus because the real estate is very narrow and it’s best to favor usability rather than aestethics.

** Mega menu panels are not shown, why is that?

Make sure that in the Header global section, you’re using the element called “Header Navigation” eg: https://d.pr/i/cW7SvK . It’s the only one that is able to show the mega menu panels. Since this is a functionality for the primary navigation, it has to be exclusive to this context.

** Mega menu options are not shown in the Menu i’m editing

Make sure the Menu that you’re editing has “Main Menu” location checked at the very bottom Location options eg: https://d.pr/i/TWw5S8 . Since this is a functionality for the primary navigation, it has to be exclusive to this context.

Was this article helpful?
Dislike 0
Views: 347

Join the conversation