In this text you will see how to make it Off-Canvas menu with Elementor using the already built-in popup functions.
The first thing you need to do is, in the control panel of your site under the section Templates you click on the option Popups and then on Add New. When you have done that, choose the type of template to be Popup, name it as you like and click on Create Template.
Once you've done that, you can choose pre-made templates from the library and just modify them or create your own template. In this example, we will make our own. Under the section Layout, we can set the width and height of our popup, then the position where it will be located, whether the content of the site will be visible when we open the off-canvas menu, whether we will have a button to turn off the menu or not, as well as the animation of the popup.
Under the section Style, we stylize the popup, whether it will have a background image, a color, whether it will have borders and what they will be, the shadow of the popup, then the button to close the menu can be styled, what its position will be, what color it will be and Similarly.
Once we've done that, we can start building the off-canvas menu by adding elements. We have added an image, which will be the logo of the site and styled it, then we will add a navigation menu that we will set to be vertical, to have no cursor when the mouse moves over the menu options, as well as whether in the responsive version the menu will have a hamburger button or not . By styling the menu under the section Style, we can specify menu size, menu options size and font, spacing and borders, position, and the like. After that, we can add social network icons and style them so that they fit nicely with the rest of the popup, changing the size, color, spacing, centering.
Once we have done that, it is necessary to click on the button Publish and then you just need to click the button Save&Close. After that, we will go to the site and at the top of the homepage of the site, click under the field Edit with Elementor to the option Main Header, within which we will additionally set up our off-canvas menu. Within Content section we will choose under the option Link by clicking on Dynamic to be Popup, then we will choose to be Open Popup and select our created template.
After setting all this up, our off-canvas menu is created and ready to use on the site. In the image below you can see what the finished popup looks like in this example.
Source: youtube
