How to create an off canvas menu in elementor

In this video, you will learn how to create an off canvas menu in elementor.

I will use the pop up feature of elementor and some custom css to create this slide in menu.

The steps we will cover here

- First, we need to create a menu with icons. Now most themes won't have an option to add an icon to the menu directly, so we have two option either we can use this plugin

https://wordpress.org/plugins/menu-ic...

Or we can use font icon library like https://fontawesome.com/

Here we will use fontawesome because elementor already uses fontawesome.

- Second, we will create the sliding menu with the pop up feature of the elementor pro pack, we will adjust the pop up settings according to our requirement (width, animation etc.) then will add our menu to it and will do the required settings.

- Third, we will add a button to trigger the pop up, for that we will create a custom header and add the button to it.

- Finally, we will do some style adjustments with a little bit of custom css. Ideally, you would add your custom CSS in the child theme css file or use a plugin like this one

https://wordpress.org/plugins/simple-...

But here I've used the customizer just to display the css effect live.

You can find the css here

https://designtheway.com/off-canvas-m...

Some of the links here are referral/affiliate links that means if you decide to buy through those links I’ll earn a commission at no extra cost to you.

Theme and plugins used
-------------------------------------------------------
Astra: https://wordpress.org/themes/astra/
Elementor: https://wordpress.org/plugins/elementor/
Elementor Pro: https://designtheway.com/recommended/...

Hosting: https://designtheway.com/recommended/...

More info at
-------------------------------------------------------
Website: https://designtheway.com/
Facebook:   / designtheway1  
Twitter:   / design_the_way  

Credits:
-------------------------------------------------------
Logo Music: https://www.bensound.com
Logo Intro: https://motionarray.com/after-effects...