Off-canvas Menu

Off-canvas menu includes 2 parts:

  • The button.
  • The off-canvas menu.

The button

Use [Dine] Button element in your Elementor element list.

The off-canvas menu

Step 1: Go to Dashboard > [DINE] Block > Add New

You can name it “My Off canvas” or anything. Hit “Publish“.

Step 2: In your hamburger button settings, click to section “Action”, choose “Open popup”.

And in Choose popup option, select your newly created [DINE ] Block “My Offcanvas menu”. Note: If you don’t see it there then you’ll need to refresh your current page to let the system update the newly created [DINE] Block.

Ok, now it’ll open the “My Off canvas” when the hamburger button being clicked. However your “My Off canvas” didn’t have any content yet. So the last step is to add content to your “My Off canvas”.

Step 3: Add content to your off canvas.

Please go to edit your [DINE] Block “My Off canvas” with Elementor.

There, please add [Dine] Navigation element and choose your menu you want to use for your off-canvas menu.

Please choose “Vertical” for your menu direction. Now you can adjust your menu style in “Style” tab like to change the font face, size, color..