Create a mega menu

WordPress menu

All the menus applied in the site are created in Dashboard -> Appearance -> Menus. This WordPress manual provides detailed instruction on creating/editing/saving menus. Our themes provide two menu locations: the Main menu and the Mobile menu. One and the same menu might be both: Main and Mobile. In addition, our themes provide various options to display the menu in any place of the site, as many menus as it may be necessary using our Header builder, Elementor element, or WordPress widget. You can create as many menus as it may be necessary: Adding a menu to the site.

Mega menu

All our themes provide options extending the default WordPress menu functions making the menu more flexible and powerful by means of megamenu blocks. Mega menu blocks are Elementor builder templates, containing Extra menu elements to make sub-menu better arranged and looking nicer. Besides Extra menu elements, megamenu blocks can contain images, text and other elements from Elementor chart.

In order to create a mega menu it is necessary to create HTML blocks separately for each menu item via Dashboard -> HTML blocks – > Add new. Note that the mega menu is not supported on mobile devices.

As soon as Mega menu blocks are ready, they may be added to menu items in Appearance -> Menu -> Select menu -> enter menu item -> HTML Block for the dropdown in the Custom fields [for theme] which appear only after the menu has been saved. First of all, it is necessary to set “Full width”, “Set sizes” or “Container” in the Design option to make the HTML Block dropdown available.

Menu custom fields

Design. This option would determine the width of the mega menu block: Default, Full width, Set sizes, and Container;

• Default – the drop-down menu will have the default width and no mega block option would appear;
• Full width – block will have the full width of the menu container aligned in the center and the option to choose HTML block as a menu mega block would appear.
• Set sizes – allows setting the custom size of the block and the option to choose HTML block as a menu mega block would appear.
• Container – set the menu dropdown to take the width of the website container.

HTML Block for the dropdown. This drop-down appears, provided “Full width“, “Set Sizes“, and “Container” is chosen in the Design drop-down and presents all the HTML blocks existing for selecting as a mega menu block.

Load HTML dropdown with AJAX. Option to load HTML blocks with AJAX only when you hover on the menu item.

Open on mouse event allows to set hover or click event on the menu item, in result Mega menu block would appear on hover or click.

Label text option to add a custom tooltip to menu item.

Label color the option to set the color of the tooltip in the menu item.

Dropdown text color scheme. Dark or light. The dark color scheme ensures dark text and light background. Light color scheme ensures light text and dark background of the mega menu block.

One page anchor. Enable using one-page navigation menu. If enabled it is necessary to set the link for this item to be like this: http://your_site.com/home_page/#anchor_id where anchor_id will be the ID of the ROW on your home page.

Image. You can upload an icon to be displayed right before the menu item text. SVG or PNG is recommended here.