How To Create A Vertical Menu In Elementor (Free Elementor Vertical Menu Tutorial)

Peter

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.

Install the HT Mega Addons Plugin

01

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

After you activate your plugin, click on it on the dashboard menu, then under Advanced Addons, enable Menu builder, and then save changes. 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 After enabling it, click on HT Builder on the dashboard, then under Header Template select your template (07:56) then save changes.

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)

02

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%

Go to your Widgets area and search for the Vertical Mega Menu widget then drag it to your first column Select the vertical menu widget, then under Content > Menu, select the menu you want to display

Select the vertical menu, go to Style > Main Menu > Background Type, select gradient, then choose your first and second colors. 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 colors, set Location to 60 and Angle to 50

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

Video: Free Elementor Vertical Menu Tutorial

Note:

Check out more on this story on the link below.