How to add mega menu panels

You are here:
Estimated reading time: 3 min

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

LinkGlobal 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.

LinkChild 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 .

LinkImportant:

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

LinkFrequently asked questions:

LinkHow to add mega menus designs from other demos?

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

LinkHow to add subcategories into a menu?

Try accessing Appearance > Menus and edit the menu you want to use. Activate the Product categories panel eg: https://d.pr/i/SxuvKX , and add the categories you want.

If you’re using a Global section Mega Menu, you will likely need to use a Menu element inside, and choose the Categories skin eg: https://d.pr/i/46356O .

LinkCan 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.

LinkCan 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.

LinkAre there more styling options?

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

LinkWhy 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.

LinkMega 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.

LinkMega 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.

LinkHow to change from hover to click, when opening a mega-menu

Rey has a built-in switcher for the opening trigger, from hover to click. Please copy the code snippet from here https://d.pr/n/zvGcTu and paste it inside the child theme’s functions.php .

Was this article helpful?
Dislike 1
Views: 3181

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!