How to Create a Mega Menu in WordPress with Elementor

A mega menu is a large dropdown that shows several columns of links, sometimes with images or a featured offer. Online stores and service businesses use it to show many categories without cluttering the header. Here is how to build one with Elementor.

Step 1: Plan the structure

• List your main menu items (Shop, Services, Resources).
• Group sub-links into three or four columns with clear headings.
• Pick one featured element per dropdown, such as a sale banner or popular service.

Step 2: Open your header template

Go to Templates > Theme Builder > Header and edit your header (or create one, see building a sticky header).

Step 3: Add the Menu widget

1. Drag Elementor Pro's Menu widget into the header.
2. Add your top-level items and set the item you want as a mega menu to use Dropdown content instead of a simple link list.
3. Click to edit the dropdown content: it opens a container you design like any section.

Step 4: Design the dropdown

• Add inner containers as columns, each with a heading and an Icon List or text links.
• Add an image box or button for your featured item.
• Set the dropdown width to full width or fit to content, matching your design.

Step 5: Mobile behaviour

Switch to the mobile view. Check that the menu collapses into a toggle and that dropdown content is readable. Hide decorative images on mobile to keep it short.

Usability tips

• Keep labels short and familiar.
• Don't put every page in the menu; link the most important ones and let category pages do the rest.
• Add a search bar to the header for larger sites.