This guide explains how to create and configure mega menus in the theme. Mega menus allow you to build advanced dropdown menus with multiple columns, images, banners, product grids, and custom content.
1. Understanding WordPress Menus #
Before creating mega menus, you should understand how WordPress navigation menus work.
All menus are managed from:
Dashboard → Appearance → Menus
If you are new to WordPress menus, review the WordPress menu documentation to learn how to create, edit, and manage menus.
2. Menu Locations #
The theme allows flexible menu placement across your website.
Common menu locations: #
- Main Menu – displayed in the website header
- Mobile Menu – displayed on mobile devices
You can:
- Use the same menu for both locations
- Create separate menus for desktop and mobile
- Display menus in custom theme locations
3. What is a Mega Menu? #
Mega menus extend the default WordPress menu by allowing rich dropdown content such as:
- Multi-column layouts
- Product grids or carousels
- Images and promotional banners
- Custom HTML or text blocks
- WooCommerce product categories
- Contact info and social links
Mega menus are created using:
- WPBakery Page Builder
- Elementor
- Gutenberg block editor
This gives full design flexibility.
4. Creating Your First Mega Menu #
Step 1 — Create an HTML Block #
Before assigning a mega menu to a menu item, create the content block first.
- Go to Dashboard → HTML Blocks → Add New
- Design your content using a supported builder
- Save the block with a clear descriptive name
Important:
The HTML block must be saved before it appears in menu options.
Step 2 — Configure Menu Item #
- Navigate to Appearance → Menus
- Select or create a menu
- Add or edit a menu item
- Expand the menu item settings
- In the Design option choose one of:
- Full-width
- Full-height
- Set-size
- Aside
This enables mega menu functionality.
Step 3 — Assign HTML Block #
- Locate HTML Block for dropdown option
- Select the HTML block created earlier
- Configure extra options if needed
- Save the menu
5. Menu Design Options #
Design Types #
- Default – Standard dropdown, no mega content
- Full-width – Full container width dropdown
- Full-height – Full height dropdown aligned left
- Set-size – Custom width/height dropdown
- Aside – Sidebar-style dropdown with tab behavior
6. Performance Optimization #
AJAX Loading #
Load HTML dropdown with AJAX
- Loads mega menu content only when needed
- Recommended for large or content-heavy menus
- Improves page performance
7. Visual Customization #
Appearance Options #
- Dropdown Text Color Scheme
- Dark (dark text, light background)
- Light (light text, dark background)
- Open on Mouse Event
- Hover trigger
- Click trigger
8. Menu Item Enhancements #
You can enhance menu items visually:
Labels & Icons #
- Label text (tooltip text)
- Label color
- Upload image icon (SVG/PNG recommended)
- Choose image usage:
- Icon next to text
- Background for dropdown
FontAwesome Icon Support #
Insert only the icon identifier:
Example:
fas fa-home
(Not full HTML tag.)
9. Advanced Features #
Page Anchor Navigation #
Useful for one-page websites.
Example URL:
http://yourwebsite.com/page/#section-id
Where section-id matches a page element ID.
Custom CSS Classes #
Allows custom styling or theme integrations.
Example:
- Adding class
woodmart-open-newslettertriggers promo popup behavior.
