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. WoodMart theme provides two menu locations: Main menu and Mobile menu. One and the same menu may be both: Main and Mobile. In addition, WoodMart theme provides various options to display menu in any place of the site, as many menus as it may be necessary: Adding a menu to the site.

WoodMart Theme provides the options extending the default WordPress menu functions making menu more flexible and powerful by means of megamenu blocks. Megamenu blocks are WP Bakery page 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 WP Bakey page builder chart.

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

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 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 to insert the key word from FontAwesome icon. For example, ID cart icon code looks like

<i class="fa fa-id-card-o" aria-hidden="true"></i>

it is necessary to extract the part, that identifies the icon, which is id-card-o and 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