How To Build A Mega Menu In WordPress With Elementor?

What Do You Need To Build A MegaMenu With Elementor?

You can create a beautiful mega menu from Element using the visual drag-and-drop feature. If you want to achieve mega menu actual functionality, you need to use a third party addon named the plus addon. There are many more plugins in the WordPress market to create mega menus. Still, The Plus add-on brings various options for creating mega menus that can be used to create vertical mega menus, horizontal menus, toggle based mega menus, etc. It offers -

• It's 100% designed for Elementor.
• It lets you build pixel perfect responsive menus. 
• It has cross-browser compatibility.
• Plenty of customization options that fit your needs.
• Easy to build any interface with drag and drop features.
• Compatible with all popular WordPress themes. 

So you need -

• Elementor
• Elementor Pro for Custom Header
• The Plus Addons (It has a free version, but you need the Pro version for the Navigation builder feature.)

How To Add a Mega Menu in WordPress?

With 4 Basic Steps, you can create a mega menu through Element and The Plus Add Ons. Although there are several sub-steps, they are described in detail below.

First, activate the megamenu feature and generate a mega menu using the Elementor template. Setup the native WordPress navigation to add your megamenu (Appearance > Menus). Then, build a header using the Elementor theme builder and finally set up responsiveness.

Activate Mega Menu Feature

At first, you have to activate the Mega Menu feature on the Plus Addons. It will then add a custom post type Plus Mega Menu to accommodate all your mega menu. Now, create a new post using Elementor to design everything from the post type.

In the WordPress dashboard, navigate to the Plus Settings, Plus Widgets, and activate the TP Navigation Menu widget.

Create A Mega Menu Template

You will see a new Plus Mega Menu custom post type right after you activate the widget. It will show up as an individual option on your dashboard side menu. Click on Add New from Plus Mega Menu to create a new mega menu.

Name it as you want because this will be very helpful if you need to create a different mega menu in different places. To launch the elementor interface, click Edit with Elementor. Now you can design the mega menu layout with Elementor that will be visible to viewers.

Here is an example of a basic expanded mega menu structure. You can see one parent section for the entire mega menu, and we have added various columns to control the expanded menu. You can add whatever content using the regular Elementor widget. Once you are done making the template, publish it.

Set Up Navigation Menu

You have to configure the native WordPress navigation feature because you have already created a mega menu template. For that, go to Appearance > Menus. Create a menu if you haven't created one. Now add the contents you want in Megamenu. At the top, add essential items, these will not trigger other megamenu contents. The easiest way is to do this is directly link pages with custom links. Then open Plus Mega Menu to add the menu items sidebar and add the mega menu template you made.

Now maybe you cant see Plus Mega Menu options in the Add menu items area. Having a hard time? This is because maybe WordPress is hiding it. To reveal this, click on Screen options in the top right and check the Plus mega menu option.

You can customize the mega menu size and alignment. For size, you can choose either - Default(enter a maximum width in pixel), Container(Based on the container size of the website), and Full Width(Mega menu will expand its full regardless of any settings.)

You can also customize the menu objects, label colors, and icons (if you need one.)

Create Header Template

Now you need Elementor theme builder to create a custom header for your website. For that, Go to Templates > Theme builder and create a brand new template for the header. As we have already created one, we will customize our existing template. In the Theme builder, you can utilize Elementor pro’s display conditions to choose where this header will appear on your site. It can make it visible all time or only to specific pages. If you are done with the basic outline of the header, add the Navigation Menu widget from the plus add-ons.

You can use Widgets settings to control the menu direction, such as horizontal, vertical, or vertical. Then use the Select menu to choose the menu you created in the previous step. For additional customization, you can do that on the style tab.

Make It Responsive

To finish out, set up the responsive behavior for the mega menu so that your visitors have a greater experience on any device. You can do this simply from the navigation menu. From there, go to Mobile Menu setting in the Content tab, enable Responsive Mobile View.