Mega menu

The Mega Menu widget from the Themepul Pack allows you to build advanced, multi-column menus easily using Elementor. It supports fully customizable layouts with widgets, images, icons, and more.

🔹 Step 1: Enable Mega Menu

1. Navigate to Themepul Pack > Extra Settings.
2. Toggle the Mega Menu switch to “On”.
3. Click Save Settings.

🔹 Step 2: Assign Mega Menu to Menu Items

1. Go to Appearance > Menus.
2. Hover over the menu item where you want the mega menu.
3. Click the topppa Mega Menu button.
4. A new modal will open titled topppa Mega Menu Settings.

🔹 Step 3: Configure Mega Menu Settings

1. Enable Mega Menu using the toggle.
2. Set Menu Content Position (parent or default).
3. Choose if the content should be Full Width.
4. Set the Menu Content Width (PX) manually.
5. Under Icon Settings, select:
   • Icon Type
   • Icon
   • Icon Color
6. Under Badge Settings, you can add:
   • Badge Text
   • Badge Color
   • Badge Background
7. Click Edit Mega Content to open the Elementor editor and start designing.
8. Click Save Settings.

🔹 Step 4: Design Mega Menu with Elementor

1. Once inside Elementor, use the layout area to drag and drop any widget.
2. You can design columns, add icons, images, or any Elementor widgets.
3. Save the section after customization.

🔹 Step 5: Add Mega Menu Widget in Elementor Header

1. Search for the Mega Menu widget in Elementor’s widget panel.
2. Drag and drop the widget to your header section.

🔹 Step 6: Mega Menu Settings

Inside the Mega Menu widget panel:

➤ Menu Settings

• Select the menu you configured earlier.

➤ Display Options

• Hide Menu Until Content Loaded: Enable if needed.
• Set:
  • Layout: Horizontal / Vertical
  • Menu Alignment
  • Item Hover Effect
  • Enable Sticky Menu (optional)

➤ Submenu Settings

• Set:
  • Submenu Indicator Icon
  • Submenu Item Icon
  • Content Alignment
  • Open Submenu On: Hover or Click
  • Submenu Animation
  • Badge Effects

➤ Mobile Menu Settings

• Add:
  • Mobile Text
  • Open & Close Icons
  • Close Text
  • Layout: Expand or Slide
  • Breakpoint: e.g., Tablet < 1025

🔹 Step 7: Style Tab

Under the Style tab, customize your menu:

• Desktop Menu Style
• Mobile Slide Menu Box
• Menu Item Style
• Menu Item Icon & Badge
• Submenu Style
• Submenu Item Style
• Submenu Icon & Badge
• Expand/Slide Menu Style