Create mega menu
WordPress menu
All the menus applied in the site are created in Dashboard -> Appearance -> Menu. This WordPress manual provides detailed instruction 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.
Mega menu
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 for the dropdown which appears only after the menu has been saved and the page reloaded. First of all, it is necessary to set “Full-width” or “Set-size” 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, Aside, 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.
- Full-height – block will have the full height of the menu container aligned in the left 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.
- Aside – arrange the subitems aside showing their dropdowns on hover as tabs. Check on our demo here
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 selection as a mega menu block.
Load HTML dropdown with AJAX – option to load HTML blocks with AJAX to optimize the performance
Dropdown text color scheme – dark or white. A dark color scheme ensures dark text and light background. A light color scheme ensures light text and dark background for the mega menu block.
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 the menu item
Image. You can upload an icon to be displayed right before the menu item text. SVG or PNG is recommended here.
Use image as. You can display the uploaded image as an icon next to the menu item text or as a background for the dropdown.
Label color – the option to set the color of the tooltip in the menu item.
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, the ID home icon code looks like this:
<i class="fas fa-home"></i>it is necessary to extract the part, that identifies the icon, which is fas fa-home, and insert it into the field.
Page anchor -enable using a 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.
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.
Last updated: March 31, 2023