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.
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.
Make sure to add a hierarchical menu structure eg: https://d.pr/i/dYYUML .
Important:
- 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 .
Frequently asked questions:
How 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 .
How 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 .
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.
How 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 .