Mega Menu Horizontal

The ShopWell Addons includes a built-in Mega Menu system that lets you create rich, multi-column navigation menus. This guide explains how to set up horizontal mega menus using either Tabs or Grid layout modes.

---

🏠 Setting Up the Home Menu (Tabs Layout) #

Use the Tabs layout to organize sub-menu items into tab sections.

Step-by-Step Instructions #

1. Navigate to Appearance > Menus.
2. Select your Primary Menu, then click Select.
3. Click on the Home top-level menu item and choose Mega Menu.

4. Under the Mega Menu tab:
   • Toggle Enable Mega Menu.
   • Set Mode to Tabs.
   • Set Tabs Behavior to Open on hover.
   • Set Width to Custom and enter 850px.
5. Click Save Changes.

Adding Content to Each Tab #

1. Click Edit Tab to add the content for each tab.

2. In the Content tab, click Add Row → choose 1 Column.

3. Click the “+” icon and select Image Box from the Mega Menu Item tab then click Add to Menu.

4. In the Image Box settings, fill in the following:
   • Image (upload or choose from media)
   • URL (optional)
   • Text Alignment
   • Button Label
5. Repeat for other tabs as needed.

Note: You should have a top-level menu item with some sub-menus to use them as tabs.

---

🛒 Setting Up the Shop Menu (Grid Layout) #

The Grid layout is ideal for large menus with multiple columns.

Step-by-Step Instructions #

1. Navigate to Appearance > Menus.
2. Select your Primary Menu, then click Select.
3. Click on the Shop top-level menu item and choose Mega Menu.

4. Under the Mega Menu tab:
   • Toggle Enable Mega Menu.
   • Set Mode to Grid.
   • Set Width to Full Width.
5. Click Save Changes

7. Click Add Column to add up to 5 columns.
8. In each column:
   • Click the “+” icon.
   • Select Heading from the Mega Menu Item tab.
   • Enter your Navigation Label and URL (optional).
   • Set Display Format to Label.
9. Add additional sub-items under each heading using the “+” icon.
10. Click Save Changes when you’re done.

---

📝 Setting Up the Blog Menu (Grid Layout with Images) #

Use this layout to visually highlight blog categories or featured content.

Step-by-Step Instructions #

1. Go to Appearance > Menus.
2. Select your Primary Menu, then click Select.
3. Click on the Blog top-level menu item and choose Mega Menu.

4. Under the Mega Menu tab:
   • Enable Mega Menu
   • Choose Mode as Grid
   • Set Width to Full Width

5. Click Add Column → Add up to 5 columns.
6. In each column:
   • Click the “+” icon.
   • Choose Image Box from the Mega Menu Item tab.
   • Click Add to Menu

7. Fill in the Image Box settings:
   • Image
   • URL
   • Button Text
   • Text Align (e.g., Default, Left, Right)
   • Vertical Image ( e.g., Default, Left, Right )

8. Repeat for all columns and click Save Changes.

---

✅ Best Practices #

• Use Tabs layout for simplified navigation on home or landing pages.
• Use Grid layout for category-heavy menus like shop or blog.
• Keep menu widths consistent for a clean look.
• Use high-quality, optimized images for better performance.

---

Need help customizing your Mega Menu further? Contact support or view more tutorials.