Holiday Deals are Here!

UP TO

35%

Discounts

Ending in:

Get Yours Now!
wpmet-website-logo
  • Home
  • Plugins
    • ElementsKit
    • ShopEngine
    • GetGenie AI
    • MetForm
    • WP Social
    • WP Fundraising
    • Wp Ultimate Review
  • About
  • Blog
  • Support
  • Contact
  • My Account
wordpress plugin

How to Create Vertical Menu in WordPress

Editorial StaffEditorial Staff Updated on: January 4, 2023 WordPress Elementor ElementsKit 4 Min Read
How to create vertical menu in wordpress (1)

Want to give a more modern touch to your website?
Well, replacing a traditional horizontal menu with a vertical one can instantly give your WordPress site a chic and modern look. On top of that, a vertical menu can enhance the user experience as well.

But how to create vertical menu in WordPress?

Well, there are several ways you can add a vertical menu to your WordPress site.

In this blog, we will show you how to make vertical menu in WordPress and also you can create vertical mega menu.

Contents hide
What is Vertical Menu in WordPress?
Advantages of using a vertical menu in a WordPress site:
How to Create Vertical Menu in WordPress using Elementor and ElementsKit
Step 1: Install Elementor and ElementsKit
Step 2: Create a menu for your WordPress vertical menu
Step 3: Enable vertical menu widget of ElementsKit
Step 4: Drag and drop the widget
Step 5: Customize vertical menu settings
Step 6: Customize Style of Vertical Menu
How to create a vertical mega menu in WordPress using Elementor and ElementsKit
Step 1: Turn on the necessary ElementsKit modules
Step 2: Turn on the ElementsKit Megamenu option
Step 3: Convert menu into mega menu using ElementsKit
Final Words

What is Vertical Menu in WordPress?

A vertical menu in WordPress represents a collection of links arranged in a vertical order rather than the traditional horizontal one. Nowadays, this type of WordPress vertical menu has recently become extremely popular as it is more user-friendly, especially on mobile devices. 

Advantages of using a vertical menu in a WordPress site:

  • These menus are visually better looking 
  • Easy to navigate menu
  • Maintain the responsiveness of the website on mobile devices
  • You can add more top-level menus in the vertical menu than horizontal
  • Works great on eCommerce websites
Best Elemetor Addon - ElementsKit

How to Create Vertical Menu in WordPress using Elementor and ElementsKit 

Here is the step-by-step guide on how to make vertical menu in WordPress. You will need a page builder- Elementor and vertical menu WordPress plugin – ElementsKit. You can easily create WordPress vertical menu if follow the steps below:

Step 1: Install Elementor and ElementsKit  

 To install, login to your dashboard and

  • Navigate to : Plugins ⇒  Add New
  • Search for Elementor / ElementsKit (one at a time)
  • Click on Install Now
vertical menu wordpress plugin

After installation, click on the Activate button to activate.

vertical menu wordpress plugin

Step 2: Create a menu for your WordPress vertical menu

Now let’s create a menu. For this, navigate to Appearance ⇒ Menu. 

click on menu to create vertical menu in WordPress

After you are on the menu page, you need to

  1. Click on Create a new menu
  2. Provide a name under the Menu Name option
  3. Finally, click on Create Menu to create the menu.
create a menu in wp

Now you need to :

  1. Select the menu from the drop down
  2. Click on Select
  3. Click on the checkbox of the menu you wish to add
  4. Click on Add to Menu to add to the menu you choose
  5. Finally, click on Save Menu to update
add menu item to wp menu

If you have multi-level menu, then you can reorder the menu items and click on Save Menu to update.

fix order menu

Step 3: Enable vertical menu widget of ElementsKit

Navigate to ElementsKit ⇒ WIDGETS ⇒ Vertical Menu widget, turn on the widget and click on Save Changes.

enable ElementsKit vertical menu

Step 4: Drag and drop the widget

Edit the page with Edit with Elementor option. Then search for the Stylist List widget with the Ekit icon and simply drag and drop the widget on the page.

drag and drop vertical menu

Step 5: Customize vertical menu settings

Now it’s time to add the menu you just created or the one you preferred to your vertical menu. You can do that from the Select Menu dropdown.

 how to create vertical menu in WordPress

If you want to turn your Elementor vertical menu into a collapsible button, you need to turn on the Toggle button.Once you turn on you can change the title of the toggle button and can also choose to add icons on both left and right side.

turn vertical menu into a toggle button step of how to create vertical menu in WordPress

Turn on Enable Hover option and activate the toggle on hover (by default it works on click.)

Step 6: Customize Style of Vertical Menu

Now it’s time to change the style of your vertical menu. For that move to the style tab.

Expand the Menu Container option to alter the Background Type, Color, Location, Second Color, Box Shadow, Border radius and so on.

menu container style settings WordPress Vertical menu

Similarly, you can change many style options under Menu Items and Sub Menu Items.

Once you are done with all the customization, click on publish and see the preview:

How to create vertical menu in WordPress

ElementsKit equips you to build a complete WordPress website. Check the blog on
How to create single page website with one page navigation In WordPress

How to create a vertical mega menu in WordPress using Elementor and ElementsKit 

To follow this tutorial, you need to make sure the vertical menu widget you turned on earlier is still turned on.

Step 1: Turn on the necessary ElementsKit modules 

Navigate to ElementsKit ⇒ Modules, turn on both Mega Menu and Header Footer Builder, and finally click on Save Changes to update.

enable mega menu and header footer builder

Now make sure you create a menu for your vertical menu by following the steps shown above. 

Step 2: Turn on the ElementsKit Megamenu option 

Once you are done preparing your menu, check the ElementsKit Megamenu option to enable the mega menu feature. Once you check this option, you will see the mega menu option if you hover over the menu.

enable mega menu from menus
Ekit Elementor addon

Step 3: Convert menu into mega menu using ElementsKit 

Now to convert a simple menu into a mega menu, hover on the menu and click on the mega menu option. Then turn on the Mega menu toggle button and click on Edit Mega Menu Content. 

edit mega menu content

Now click on the Ekit icon, move to the section tab, search for the mega menu then choose the premade mega menu template you like. Once you insert it, you can edit it according to your needs.

insert vertical mega menu

Once you are done, click on update to save the menu. Repeat the same process on all the menus for which you wish to create a mega menu. 

And that’s it you have made your mega menu. You can use the ElementsKit header footer builder to add a mega menu to your website. 

For more details about the mega menu builder of ElementsKit, check our blog How to Build a Mega Menu With Elementor and ElementsKit. You can also watch the whole process in the video below:

Final Words

ElementsKit makes creating a vertical menu in WordPress an extremely easy task to execute. While a horizontal menu is great, sometimes having a change in the menu can uplift the appearance of your website. Especially if you have an eCommerce site then you should try the mega menu feature of ElementsKit.

I hope you found the blog helpful, if you have any questions regarding the vertical menu WordPress plugin do feel free to let us know.

Download ElementsKit to add Vertical Menu
  • Share :

Top 5 Tweet Generator Tools that are Worth Trying in 2023

Previous post

Wpmet Year in Review 2022: A Year of Surprises, Growth, and Achievements

Next post

Leave a Reply Cancel reply

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

Get Subscribed Today!

wpmet-website-logo
© 2022, Wpmet. All Rights Reserved. Built with ElementsKit.
Elements Kit
ShopEngine
GetGenie AI
Metform
WP Social
Wp Ultimate Review
Wp Fundraising
About us
Contact us
Support
Login/Register
Collaborate
Affiliates
Affiliate Area
Privacy Policy
Terms and Conditions
Refund Policy
Payment systems accepted by Wpmet

Wpmet is not affiliated with or endorsed by Open Source Matters or the WordPress Project. The CMS logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Opt out!.
Cookie SettingsAccept
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
Vendor/Partner
SAVE & ACCEPT