In this blog post, I’ll show you how to create a free Elementor mega menu using the HT Mega Addons for Elementor. HT Mega Addons is a free Elementor extension that not only enables you to create mega menus for your Elementor website but also provides you with several features/widgets that enable you to build your site without needing extra plugins.
In this tutorial, we’ll use the free Menu Builder feature from the HT Mega Addons. Let’s get started.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
List Of Contents
Free Elementor Mega Menu Tutorial using HT Mega Addons
Install HT Mega Addons
Log into your Elementor website and go to Plugins > Add New, search for HT Mega Addons, install and activate it (00:46)
After activation, HT Mega Addons will show up on the dashboard menu, click on it and in the next window you’ll see a list of widgets. Go to Advanced Addons and enable the Menu Builder (01:44), then save changes.
After saving your settings, click on HT Menu, which will take you to a dashboard where you can style your menu to your preference (02:01)
Create Mega Menu
When you’re done styling your menu, the next step is to create your mega menu. To do this:
Go to Appearance > Menus, check the Enable Mega Menu option then save (02:25).
Under Menu Structure is a list of items that are present in the menu on the website. We’re going to add another menu item where the mega menu will be added.
Under Add menu items go to Custom Links, add a hashtag (#) under URL and add Works under Link Text, then click Add to Menu (03:14).
Drag the new item (Works) and position it above Contact, then click the Save menu button.
When you go to the website and reload, Works will be added as a new menu item (03:38)
Back in your menu structure, click on Works and check the Enable Mega Menu option, then on the select template option you can choose a template to use in your mega menu; a template you should’ve created using Elementor (04:32), then Save Menu.
After saving the menu go to your website and reload it, your mega menu should show up under Works (05:43)
You can also do more customization on your mega menu back under the menu structure. For example, you can change your menu width, you can add a menu icon, a badge, etc. and for even more advanced customizations, you’ll need the pro version of HT Mega Addons.
That’s how you can use HT Mega Addons to create a mega menu for your Elementor website.
All you need is to activate your plugin, create your mega menu, create your template with Elementor and add it to your mega menu, and you’re all done!
And to top this off, your mega menu will also be completely responsive on both tablet and mobile devices.
For any questions or comments about this or any other tutorial, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.