Off Canvas menus are a great way to show different menus on your WordPress website. While this adds up to the website’s overall user experience, it also makes the website look more spacious and interactive. You, too can create amazing Off-canvas or Sidebar menus, and that too without touching a single line of code with Elementor Page Builder.
Elementor Pro has powerful features for creating theme parts like – Header, Footer, Archive Layouts, and much more. PowerPack Addons takes Elementor to the next level with its creative widgets. The Advanced Elementor Menu widget of PowerPack gives you the capability of creating Off-canvas Elementor Menus.
Let’s see how you can create an Off-Canvas menu on your website with the PowerPack’s Advanced menu Addon for Elementor.
Elementor Off-Canvas Menu Setup Guide:
For this tutorial, you will require:
Once you have these two plugins installed, we can begin creating our off-canvas menu.
Since we want our off-canvas menu to open up on all the pages on the website, we will add the menu on the custom header made with Elementor.
Since the header is displayed on every part of the website, the menu will appear as well. Here is a quick tutorial on how you can create a custom header with the Elementor page builder.
Let’s add the Advanced Menu widget to the custom header. For this, open the header in the Elementor editor and drag and drop the advanced menu widget. As soon as you do that, you will see the menu appear on the header.
If you want to show a different menu, you can select the desired one from the options available.
Elementor Menu: Content Tab
Now, we will customize the menu to pop up as an off-canvas menu. For this, we need to change the breakpoint from the content tab.
Under the responsive section, set the breakpoint to ‘Always,’ and for the Menu Type, select the menu as ‘Off Canvas.’ Now you must see the hamburger icon in the place of the menu.
It is now time to customize the menu to look the way we want. I have made the following changes:
- Changed the alignment to the Right.
- For the Toggle align option, change the alignment to the Right.
- Set the Breakpoint to Always.
You can make any custom change you want there from the options given in the Content tab.
Elementor Menu: Style Tab
So far, we have our menu functioning the way we want. Still, it requires a styling touch to look how we want it to. For this, move over to the style tab to make changes to how your menu appears.
These are the changes I have made in the style tab:
- Changed the text color.
- Customized the typography for the menu.
- Changed the color and width of the toggle button.
- Changed the alignment of the menu to the Left.
- Altered the menu background, link, and hover color.
- Changed the horizontal and vertical padding.
- Added the box shadow to the off-canvas menu
You can make many more alterations to the menu in terms of design.
With the advanced menu’s immense customization capabilities, you can make your Off-Canvas menu look the way you want with Elementor builder. Here is what our menu would look like after making all the customizations.
Over to you!
Now it is your turn to make an awesome off-canvas menu using the Advanced Elementor menu widget of the PowerPack add-ons for Elementor. You can check out our Advanced menu’s demo page to better understand what you can create with the widget.
If you like this widget, have a look at the other widgets as well! We have more than 50 Elementor widgets in our widgets library, and more are added regularly.
If you liked this, do share the love!