Mega Menu

🌟 Topper Pack Mega Menu – Step-by-Step Setup Guide

The Mega Menu feature in Topper Pack lets you build powerful, multi-column dropdown menus with complete Elementor control. You can place widgets, icons, images, sliders, badges, and more, making your navigation interactive and highly customizable.

🔹 Step 1: Enable the Mega Menu Extension

1. Go to your WordPress Dashboard.
2. Navigate to: Topper Pack → Extra Settings.
3. Locate the Mega Menu option.
4. Toggle the switch to enable it.
5. Click the “Save Settings” button below.

🔔 This activates the Mega Menu capability across your navigation system.

🔹 Step 2: Access and Configure WordPress Menu

1. Navigate to: Appearance → Menus.
2. Choose your main navigation menu or create a new one.
3. Add menu items like:
   • Pages
   • Custom links
   • Categories
4. For each item you want to enhance, click the “TPP Mega Menu” button.

💡 This will open advanced settings specifically for that menu item.

🔹 Step 3: Customize the Mega Menu Item

Once you click TPP Mega Menu, a modal settings window will appear.

Key Settings to Customize:

• Enable Mega Menu: Toggle this switch.
• Edit Mega Content: Launches Elementor editor to design your mega menu content.
• Full Width Content: Enable for full-screen dropdown menus.
• Menu Content Width (PX): Adjust (default: 1170px).

Optional Enhancements:

• Icon Settings:
  • Icon Type (TP icons or Font Awesome).
  • Select custom icons.
  • Choose icon color.
• Badge Settings:
  • Add label (e.g., “New”, “Sale”).
  • Set badge color and background color.

Click Save Settings when done.

🔹 Step 4: Build Mega Menu Content in Elementor

1. Click Edit Mega Content inside the TPP settings.
2. Elementor will open up a full design canvas.
3. Use any Elementor widgets to build the mega dropdown:
   • Containers & Grids for layout.
   • Images & Icons for branding.
   • Buttons for CTA.
   • Headings, Text Editors, or Custom Widgets.
4. Save your Elementor layout.

🌈 You’re essentially building a full Elementor section for your dropdown content!

🔹 Step 5: Use Mega Menu Widget in Header (Optional)

If you’re using Elementor for header building:

1. Open the Elementor Header Template.
2. Search for Mega Menu in Elementor’s widget panel.
3. Drag the TP Mega Menu widget to your desired location.
4. In the widget panel, configure:
   • Menu Layout: Horizontal or Vertical.
   • Menu Alignment.
   • Item Hover Effects (Fade, Slide, etc.).
   • Sticky Menu toggle.

Submenu Display Controls:

• Set Submenu Icons.
• Open on Hover or Click.
• Add Badge Effects.
• Adjust Content Alignment.

🔹 Step 6: Customize for Mobile Responsiveness

1. Scroll to Mobile Menu Settings inside the widget panel.
2. Set toggle text (e.g., “Menu”).
3. Upload custom hamburger and close icons.
4. Adjust mobile menu behavior and animation.

📱 Your Mega Menu will be fully responsive, ensuring a smooth mobile experience.

🔹 Step 7: Save & Preview

• Save your Elementor header or the menu structure.
• Visit your website.
• Hover or click the menu item to preview your dynamic Mega Menu.

You should now see a beautifully structured dropdown with rich content powered by Elementor.

✅ Benefits of the Topper Mega Menu

• Full Elementor-powered customization.
• Rich media support (Icons, Images, Sliders).
• Mobile responsive out-of-the-box.
• Easy activation per menu item.
• Stylish badges, hover effects, and sticky options.