Table of Contents
Are you tired of the same old navigation bar on your Elementor website? Looking to add a dash of creativity and functionality? Well, buckle up, because we’re about to embark on a thrilling journey to discover how you can spice up your site with a captivating side menu! Imagine a sleek and stylish menu sliding in from the edge, guiding your visitors effortlessly through your content. With just a few simple steps, you’ll learn how to unleash the power of Elementor using Unlimited Elements and create a side menu that’s as eye-catching as it is user-friendly. So, fasten your seatbelts and get ready to transform your website’s navigation game like never before! Let’s dive in – just follow this step by step tutorial!
The “Side Menu” by Unlimited Elements offers various benefits, including enhanced navigation, a space-saving design, and an improved user experience. The side menu provides advanced features such as an off-canvas menu, an accordion menu, a sidebar menu, a floating menu, a vertical menu, push content effect, overlay, advanced search bar, etc., and it includes a hamburger icon for intuitive navigation. It also supports multi-level navigation for complex websites.
Click the buttons below to view the demos of the Side Menu
Overlay Left
Overlay Right
Push Left
Push Right
Step #1: Install and activate Unlimited Elements Pro for Elementor
To get started, purchase Unlimited Elements from the link below:
Then follow these steps:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
Once activated, you’ll need to enter your license key.
Step #2: Install the Side Menu Widget in Your Website
After installing Unlimited Elements Pro you can Install the Side Menu Widget.
In your WordPress dashboard go to Unlimited Elements and click “Widgets”
Now search for the side menu widget and hover your mouse cursor over it. You’ll notice an “Install” button – simply click it to install the widget.
Step #3: Create the WordPress Menu
You will need a WordPress menu to use this widget. To create a new menu:
Open your dashboard
Go to Appearance → Menus
Click to Create a new menu
Give your menu a name than press "Create Menu"
- On the left side you will see all the pages you created earlier. Now select the pages you need and then click on “Add to menu”.
- Besides pages, you can also add custom links, categories, WooCommerce categories, etc., to your menu.
- Press “Save Menu” after adding the relevant items to your menu.
That’s it. Our menu is ready. Now it’s time to add the Side Menu widget to your Elementor page.
Step #4: Adding the Side Menu Widget on an Elementor page.
Drag and drop the Side Menu widget on the page.
Now, in the widget’s general settings, choose the menu you previously created to display it as the side menu.
- You can choose the maximum depth of menu items to be displayed in the side menu.
- The side menu’s position can be configured to appear either from the left or the right side of the screen.
- You can show or hide the search bar within the side menu according to your preference.
- Action buttons can be added to the side menu, each with its own icon, text, and link.
- The side menu includes multiple items, all of which can be tailored to suit your specific requirements.
Step #5: Styling the Side Menu widget
In the style tab, you can customize the colors for the background and menu items, and adjust the typography, including font style, size, and color. The widget allows for flexible alignment and positioning, and it is designed to be mobile-responsive, ensuring a seamless display on different devices. With these features, you can create a visually appealing and user-friendly side menu for your website.
Your Side Menu is Ready!
By following this guide, you now have the tools and knowledge to add an impressive side menu to your Elementor-powered website. You can play with colors and animation effects, or experiment with different styles, your side menu will undoubtedly elevate the user experience and make navigation a breeze.
Remember to let your creativity shine and align the side menu with your website’s unique design. So, go ahead, explore the possibilities, and give your visitors an unforgettable journey through your content with a side menu that stands out from the crowd.
Example of Side Menu
Here is an example of what you can achieve with Side Menu widget.
In addition, Unlimited Elements provides the following menu navigation widget options to improve your website’s accessibility and user experience.
