How to Create a Mega Menu With Elementor in 2023

A clear menu structure makes your site easy to navigate. Your visitors are people with busy schedules. You should improve their experience on your website. Make it easy for them to find what they need in the shortest time.

Deciding to improve navigation on your site is the easy part, but creating and customizing it can be a daunting task.

Elementor makes everything smoother. The Elementor popup builder allows you to create a mega menu with drag-and-drop functionality.

Use this to create an outstanding menu popup. Improve the menu’s design by adding an entrance animation. This uniqueness will hold your visitors’ attention and increase their chances of converting.

How does a user trigger this menu? They simply click on a button that highlights the feature they’re looking for.

Although Elementor provides a template library that makes things easier, creating one from scratch will ensure you have a perfect match for your brand.

Here’s a quick index to help you navigate this article:

How to Create a Mega Menu With Elementor Page Builder
Edit the Section
Design the First Column
Design the Second Column
Integrate the Popup With the Menu Icon
Wrapping Up

So let’s dive in.

How to Create a Mega Menu With Elementor Page Builder

First, log in to your WordPress Dashboard.
Go to Templates > Popup > Add New Popup.

After clicking the Add New popup, you will see a popup form to set a few conditions.

Select the type of template you want to work on: Popup.
Choose a name for your template: Mega Menu.
Next, click on the Create Template button.

Now the Elementor library will appear in front of you. We will design the mega menu from scratch, so we will not be using the template library.

To remove the template library, click on the cross icon in the right corner.

After that, you will see the Elementor dashboard like this:

Click on the single settings/popup settings icon.
Make changes to the popup settings according to the below steps.

Settings: Layout > Width: 80 (vw), Overlay- Hide, Entrance Animation- Fade In, Animation Duration- 2 seconds.

Style: Close Button > Vertical Position- 2.5, Size- 30.

Advanced: Prevent closing on the overlay- Yes.

After making these changes, the popup area will become a bit large, because a mega menu actually is a large menu.

Compare the last two images and notice the changes.

Now let’s divide a section into two columns.

Edit the Section

Select the section first.
Layout > Content Width: Full Width, Columns Gap: No Gap.

Choose two different colors for the two columns.

Select the first column > Style > Background Type – Classic, Color – #141B60
Select the Second column > Style > Background Type – Classic, Color – #0B958F

Design the First Column

Drag an inner section widget from the left side and drop it in the first column.
You will see that in the inner section, there will be two more columns. Delete the column between them.

Select the Inner Section:

Layout Tab > Content Width- Boxed, Columns Gap- No Gap.
Advanced Tab > Padding (70,70,70,70)

Drop a Heading widget into the inner section of the first column.
Then remove the default heading text. Write “Home”.

Remember, you will not use the nav menu widget to create your menu. You will use the heading widget. Later, we will link them to our web pages.

Heading > Style > Typography > Size – 60, Weight – 300.

Edit this heading in tablet and mobile mode.
Select the heading widget, right-click on your mouse, and choose duplicate.
Repeat this process for however many pages you want to add to the menu.
Next, remove the text of the heading widgets and transform them into page names. We will add home, about us, contact us, and blog pages.

Drop a button widget into the first column, below the menu pages.
Edit the button as you like.

Content tab > button > text – Our story.

Style tab > Typography > Family – Amarante, Size – 24, Weight – 500.

Normal Mode > Text Color – White,Background Color – #09B68.

Hover Mode > Text Color – White,Background Color – #68E2DD, Hover Animation – Grow.

Advanced tab > Margin- Top – (25)

Insert another inner section below the button.
Delete one of the two columns into the inner section widget.
Inner Section > Layout Tab > Content Width- Boxed, Columns Gap- No Gap.
Inner Section > Advanced Tab > Padding (0, 70, 30, 70)
Add a Share button into this inner section.
Share button > Content Tab > View- Icon, Skin- Minimal.

Design the Second Column

Add a new inner section into the second column.
Delete a column in the inner section
Inner section > Layout Tab > Content Width – Boxed, Column Gap – No gap.
Inner section > Advanced Tab > Padding (70, 60, 70, 60).
Take a form widget from the left side and drag it into the inner section.
Edit form > Content Tab > Form fields > Label – Hide.
Edit form > Content Tab > Submit button > Text- Sign Up, Size – Medium.
Edit Form > Style Tab > Button > Background color – #141B60.
Add a heading widget above the form.
Edit heading > Content Tab > Title – “Sign Up For Our Email Newsletter and Ebook”, Alignment – Center.
Edit heading > Style Tab > Typography > Family – Arial, Size – 28.

After making these changes, drag an image widget into the second column.
We are choosing the cover image of our ebook.
Edit Image > Content Tab> Image Size – Full, Alignment – Center.
Edit Image > Style Tab > Width – 60, Border Type – Solid, Width- (11,11,11,11)
Edit Image > Padding (0, 0, 60, 0).

After that, click on the publish button. There is no need to change anything from Conditions, Triggers, or Advanced Rules. At last Save and Close.

Congratulations! You have successfully designed a mega menu.

Go to your header template to edit the header.
Create a button with the bars icon where we generally place our site logo.
Edit Button > Content Tab > Button > Text – Popup, Link – “Click on the Dynamic Tag”, Then select Popup.
Again click on the popup.
Action > Toggle Popup (It means when you click on the “menu icon” Button the mega menu will open and close)
Popup > Select your menu name (Mega Menu).

That’s all you need to know about creating a mega menu with the Elementor Popup Builder.

Wrapping Up: How to Create a Mega Menu With Elementor?

There is almost no limit to what you can achieve with the Elementor popup builder.

Once you master the basics of creating a popup mega menu, you can experiment with the different functionalities.

Use them to make your website efficient and increase the chances of visitors coming to your site again.

Customize the popup content and improve the design of the popup window. For example, you can set the close button to show after a given time. Or set the popup to disappear after a set time.

Easily create a beautiful popup menu by following the step-by-step instructions we have provided.

If WPCITY‘s this post helped you, support us by sharing this post on Facebook, Twitter, or LinkedIn.

Read Other Tutorials:

How to Create a Mega Menu With Elementor in 2023