How to Create a Vertical Menu in Elementor (Free Elementor Vertical Menu Tutorial)

In this tutorial, I’m going to show you how to create a vertical menu in Elementor for free using the HT Mega Addons for Elementor. You can be able to do this with both the free and pro versions of Elementor. With your vertical menu just like the horizontal menu, you’ll be able to navigate through pages on your website.

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.

Video: Free Elementor Vertical Menu Tutorial

Install the HT Mega Addons Plugin

On your WordPress dashboard, go to Plugins > Add New, search for the HT Mega Addons, install and activate it (00:59)

r9qIjP4BZEq9js981J79liU8 0Nlb4xg84K pdGxzp2aap0go24qUqs5XeWWysCbPlfUn6sUSuHTw0qvg8tBA

After you activate your plugin, click on it on the dashboard menu, then under Advanced Addons, enable Menu builder (01:09), and then save changes.

cjb2b3nNs3QYJFUbEpnzXewKCyEADR

If you don’t have Elemnentor pro to help you create your headers and footers, HT Mega enables you to use the HT Builder to assign a section as your header.

To do this go to HT Mega on your dashboard, go to Settings > Advanced Addons, enable the Theme Builder then save changes (07:46)

After enabling it, click on HT Builder on the dashboard, then under Header Template select your template (07:56) then save changes. 

qKhGKZHjgJiUGu53DQyaE dF06IuG7G1s8b39bkIVy8elHIcdnnIzgp10u3 DdEgpj9mnPSxItInCETqhqRMpSypYmL awJvrjiQxQ 9eSIHxhmBHufaPplWmqhK8vF1jHP

This way you’re able to use the header section and create a vertical menu with HT Mega Addons, for free without Elementot Pro.

Add a Vertical Menu using Elementor (Free)

If you’re using the free version of Elementor, open up your page with Elementor, and add a new section with 2 columns. 

Select the section and under Style > Background Type, select Image then insert an image from your media library.

Select the first column and under Style > Column Width, give it 25%, then select the second column and give it 75% (02:22).

YGJZR0Jasfc8g6q0vS2PtIJSFajnpKcx2I hkiyMX5snjzEu8XntXEYf8CG854 7YfYYwjGTc9cUnS9QawP9lCw EK63QxeO

Go to your Widgets area and search for the Vertical Mega Menu widget then drag it to your first column (02:31)

TlSX8xTs53emWt

Select the vertical menu widget, then under Content > Menu, select the menu you want to display (02:44).

D0RufYfu98PfTDpny0Pih8ACllZmiogffQqmxryNYY3Okgv9U zLN1RSADlYzojbq6tFa

Tip:

To create a menu, go to your WordPress dashboard and under Appearance > Menus > Add New, give your menu a name then Add menu items to it and save (02:54), then you’ll be able to select this menu in your Elementor editor.

Select the vertical menu, go to Style > Main Menu > Background Type, select gradient, then choose your first and second colours. You can also do more styling on your menu background.

When you’re done go to the Main Menu Items option, under Text Color select white, under Typography > Weight, give them 700. On Hover, go to Background Type and select Gradient, then choose different gradient colours, set Location to 60 and Angle to 50 (06:30)

free elementor vertical menu using HT Mega addons

When you’re done setting up your menu, click the Update button, then preview your page.

a2OwvSq9H4yVTAsds13aB9yo2vkr5Fig PHbXwAs kEzjAqTkhIsNSXvCTPD6k VI9SucxWznwQf TF8aAME e4uw32mCLBo7 N2yRNljblXg8aCG2W4jxHCyN vIPHIMNAC SYG

In closing

That’s how you can create a vertical menu in Elementor for free using the HT Mega Addons plugin.

If you have any questions or comments, 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.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users