Off Canvas Menu

Off-canvas menu includes 2 parts:

• The button.
• The off-canvas menu.

So correspondingly, there’re 2 steps for building an off-canvas menu: to create a hamburger button and to create the off-canvas menu. However, you must create the off-canvas menu before the button.

Step 1: Create Off-Canvas Menu

Go to Dashboard > FOX Blocks > Add New and you can name it as My Off-canvas Menu. For the option “This Block is being used for:”, please choose “Off-canvas Menu”

Step 2: Edit the newly created FOX Block with Elementor. Here you add the content to your off-canvas menu. It can be anything: a menu, logo, social icons, search form.. There you have helpful FOX Elementor addons like FOX button, FOX Navigation..

After creating the content, hit “Update” to save it.

Step 3: Create the hamburger button

Now, in your Elementor page or in your Header Builder, add FOX Button element. Then give it the settings like images below:

Now, try to click your button you’ll see it opens the off-canvas menu. Now save your page, you have a hamburger button that opens an off-canvas menu.