Create mega menu

All the menus applied in the site are created in Dashboard -> Appearance -> Menu.  WordPress manual: https://codex.wordpress.org/WordPress_Menu_User_Guide  provides detailed instructions on creating/editing/saving menus.

There are two menu locations: the Main menu and the Mobile menu. One and the same menu maybe both: Main and Mobile. In addition, the WoodMart theme provides various options to display menus in any place on the site, it is possible to create as many menus as required, more detailed descriptions of the menus options are provided here: Adding a menu to the site.

WoodMart Theme extends the default WordPress menu by means of megamenu blocks. Megamenu blocks are WP Bakery page builder or Elementor templates, allowing to add of any element or widget: text, images, product grid, and other static elements.  In most cases, the demo uses the Extra menu element/widget to make the sub-menu better arranged and looking nicer.

In order to create a megamenu it is necessary to create HTML block separately for each menu item in Dashboard -> HTML blocks - > Add new.

As soon as Megamenu blocks are ready, they may be added to menu items in Appearance -> Menu -> Select menu -> enter menu item -> HTML Block 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” or “Set-size” in the Design option to make the HTML Block dropdown available.

Custom fields [for theme] in menu item:

Design

This option would determine the width of the mega menu block: Default, Full-width, and Set Size;
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-size- allows setting the custom size of the block and the option to choose HTML block as a menu mega block would appear.

HTML Block for the dropdown

This drop-down appears, provided "Full-width" or  "Set Size" 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,

Icon name This filed supports icons only from the provided source from FontAwesome source   - the field requires inserting the keyword from FontAwesome icon. For example, ID home icon code looks like:

<i class="fas fa-home"></i>

it is necessary to extract the part, that identifies the icon, which is fas fa-home, and to insert into the field.

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 dropdown - the option to set the color of the tooltip in the menu item;

Dropdown text color scheme - dark or white. Dark color scheme ensures dart text and light background. Light color scheme ensure 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;

"Call to action" button - allows presenting the menu item as a button;

Open link in new tab option is provided;

Link Relationship XFN - https://codex.wordpress.org/Defining_Relationships_with_XFN

CSS Classes (optional) allow to insert a class and assign custom CSS, besides inserting class woodmart-open-newsletter would assign menu item to the theme Promo Popup