This guide explains how to create and display navigation menus in the theme, including the main menu, mobile menu, secondary menu, sticky navigation, mobile bottom navbar, and the MegaMenu widget for advanced layouts.
1. Main Menu #
The Main Menu is displayed in the website header using the Header Builder.
How to Add Main Menu: #
- Go to Theme Dashboard → Header Builder
- Select your header layout
- Open header settings
- Add the Main Menu element
Main Menu Style Options #
The main menu element provides several styling options:
Menu Styles #
- Default
- Underline
- Bordered (1px border on the right)
- Separate (1px separator between items)
- Background style
Layout Options #
- Menu alignment:
- Left
- Center
- Right
- Full-width menu option
2. Mobile Menu #
The Mobile Menu is displayed automatically on mobile devices via the Header Builder.
How to Create Mobile Menu: #
- Go to Appearance → Menus
- Create or select a menu
- Assign it as Mobile Menu
This menu will automatically appear in mobile view.
Mobile Menu Notes #
- You can use the same menu as both Main and Mobile
- However, creating a simplified version is recommended
- Mobile menus support multi-level navigation
Important:
Mega menu blocks are not supported in mobile menus due to limited screen space.
Product Categories Menu (Optional) #
The mobile menu element also supports displaying:
- WooCommerce product category menu
- Any menu created under Appearance → Menus
3. Sticky Navigation #
Sticky navigation keeps important menu elements visible while scrolling.
Benefits: #
- Improves usability
- Quick navigation access
- Better mobile experience
You can configure sticky behavior separately for different devices and scroll actions through theme settings.
4. Mobile Bottom Navbar #
The theme includes a Mobile Bottom Navbar, a sticky menu displayed at the bottom of mobile screens.
Enable Mobile Bottom Navbar #
Navigate to:
Theme Settings → General → Mobile Bottom Navbar
Available Options #
Core Settings #
- Enable sticky navbar
- Show or hide icon labels
- Select buttons to display
Available Buttons #
- Shop page
- Home page
- Blog page
- Mobile menu toggle
- Compare
- Wishlist
- Cart
- My Account
- Off-canvas sidebar
Custom Buttons #
You can add up to three custom buttons:
- Custom button URL
- Custom button text
- Custom button icon
5. Secondary Menu #
The Header Builder includes an additional Menu element for displaying a secondary menu.
Common Uses: #
- Newsletter links
- FAQ links
- Support links
- Promotional links
Note:
This menu is not fully responsive, so consider mobile display when adding items.
6. MegaMenu Widget #
The MegaMenu widget allows you to display any menu with mega menu blocks anywhere on your website, not just in the header.
Typical Use Cases: #
- Browse categories section
- Sidebar navigation
- Landing page navigation blocks
- Promotional menu sections
This widget can be placed inside:
- Page content
- Sidebar widgets
- Custom layouts
