Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Theme Faqs - Build a mega menu

Maria Do

Written by Maria Do

Last updated

666 views

On this page


Mega menus are big expandable menus where everything is visible at once. Visitors don’t need to hover over an awkward drop-down to try and pick the right option or dig into your footer to find what they’re looking for. Mega menus are so useful.
However By default, WordPress makes it easy to create a simple drop-down menu using core functionality, but unfortunately, there’s no core support for mega menus. And in this post, give you a step-by-step tutorial for how to create a mega menu using Megamenu option and Elementor.

2021-12-17_11-47-16-3.gif

1. Design Your Mega Menu Using Elementor

Step 1: Enable Edit Megamenu with Elementor. From the left sidebar > Elementor > Settings > General > Tick on Megamenu on Post Types.

Pasted-925.png

Step 2: Add new Megamenu. From the left sidebar of the Dashboard, select the ‘Mengamenu > Add New‘ option to bring up the Mega Menu Editor.

Pasted-926.png

Enter a name for your new mega menu in the Menu Name box. Then click the Edit with Elementor button to launch the Elementor interface.

Pasted-927.png

1.1. Design Megamenu using banners.

If you have more than one store and want to link them, you can add the Banner section to introduce your stores to clients. Please go to Kalles theme > Banner.

Pasted-917.png
  • Image: You can select the image to display (such as your home page) and then paste your store link here.

Pasted-918-1536x927.png
  • Content: You can add a label, title, etc. for the banner.

Pasted-919-1536x927.png

Result:


1.2. Design Megamenu using Links list

If you want to show a list in megamenu, you can select Kalles theme > Links list.

Pasted-920-1536x888.png

With Links list, you can insert the title, link, and label.

Pasted-921-1536x917.png

1.3. Design Megamenu with multiple sections

  • Edit megamenu by combining Links list and Banner.

Pasted-922.png
  • Edit megamenu by combining Links list and Products: You can add section Products to emphasize specific products on Megamenu.

Pasted-923-1536x502.png
  • Edit megamenu by combining Links list and Blog: You can see the Blog section in Kalles Theme.

Pasted-924-1536x536.png

In addition, there is a number of choices for you, please try to design your own megamenu.

2. Enable the mega menu functionality in Regular WordPress Menu

To enable mega menu functionality, go to Appearance > Menus in your WordPress dashboard.
If you haven’t already created a menu for your site, you’ll want to make sure that you’ve set up the menu structure. In the next step, you’ll be able to turn one or more of the top-level menu items into a mega menu when a user hovers over it.

Pasted-354-1536x873.png


Once you’ve selected the menu location where you want to place your mega menu. These settings will let you:

  • Enable Megamenu option.

  • Megamenu Type: Set a custom mega menu width. Select between Fullwidth and Custom size.

  • HTML Block for the dropdown:  Select Mega menu item that you created in the previous step for current location.

  • Click the Save Menu button in the Menu Editor to save your changes.

    Pasted-357-1536x873.png

Kalles theme offers mega menu support, that’s always a great first option. Just remember that you’ll lose your mega menu if you switch themes and you might not have as much flexibility.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

We highly recommend Shopify apps from our partners.

We uses cookies to ensure you get the best experience on our website.