How to Create an Off-Canvas Menu and Header Using Elementor Pro

Overview

This tutorial demonstrates how to design and configure an off-canvas navigation menu using Elementor Pro for WordPress. The instructor walks through building a slide-in sidebar menu completely from scratch using Elementor's Popup builder, eliminating the need for third-party popup add-ons.

Introduction and Popup Template Initialization

00:00

The tutorial opens with an introduction to creating an off-canvas slide-out menu in WordPress using Elementor Pro. From the WordPress dashboard, navigate to Templates > Popups and click 'Add New Template'. Select Popup as the template type and assign it an identifiable name (for instance, 'Off the canvas 3'). Dismiss the pre-made Elementor template library to start constructing the layout on a blank canvas.

• Elementor Pro is required to access the native Popup Builder feature.
• Create a dedicated Popup template under Templates > Popups.

Configuring Popup Layout, Sizing, and Animation Settings

01:05

Click the gear icon in the bottom-left corner to access Popup Settings. Set Width to a fixed pixel dimension such as 300px. Change Height to 'Fit To Screen' and set Content Position to 'Top'. Under Position, align Horizontal to 'Left' (or 'Right' for responsive mobile views) and Vertical to 'Top'. Under Entrance Animation, choose 'Slide In Left' with an Exit Animation of 'Slide Out Left', and tune the animation duration to approximately 0.8 seconds. Customize background styling using solid global colors or imported images, and position the close button.

• Fit to Screen ensures the off-canvas panel stretches the full viewport height.
• Desktop positioning settings are inherited by tablet and mobile unless explicitly overridden.
• Slide In Left and Slide Out Left create the standard off-canvas sliding behavior.

Building the Off-Canvas Menu Content Structure

04:37

Add a primary container set to 100% full width and nest child flexbox containers inside. Insert the Site Logo and Site Title widgets into an inner horizontal container, centering and spacing them. Add Divider widgets to separate sections. Drag in a Search Form set to inline layout, followed by Heading widgets and the WordPress Menu widget. Configure the menu layout to Vertical and set the mobile breakpoint dropdown to 'None' to prevent the menu inside the popup from collapsing into an extra hamburger button. Insert social media icons and secondary navigation links.

• Setting the WordPress Menu mobile breakpoint to 'None' prevents nested hamburger menus inside the drawer.
• Flexbox containers with horizontal row direction allow inline placement of the logo and title.
• Dividers and headings cleanly segment search, primary navigation, and social follow links.

Publishing the Popup without Automated Triggers

08:22

Click Publish/Update on the Popup editor. In the conditions, triggers, and advanced rules modal, do not configure page-load or scroll triggers. Because this popup functions strictly as an on-demand navigation drawer triggered by user interaction, leave triggers disabled and simply click 'Save & Close'.

• Navigation off-canvas popups should not use automatic page-load or inactivity triggers.
• Triggers are handled manually via header button dynamic tags.

Constructing the Site Header and Linking the Off-Canvas Trigger

08:54

Navigate to Templates > Theme Builder and open or create a site Header template. Structure the header using nested full-width containers. Allocate custom percentage widths to elements (e.g., Menu 70%, Search 20%, Trigger Icon 10%). Insert an Icon widget using an alignment or hamburger icon (e.g., 'align center'). In the Icon's Link field, click Dynamic Tags, select Actions > Popup, and click on 'Popup' settings. Set Action to 'Open Popup' and search for your off-canvas popup template name ('Off the canvas 3'). Save the header with the condition 'Entire Site'.

• Dynamic Tags allow any clickable Elementor widget to trigger an Open Popup action.
• Ensure the exact name of the created off-canvas popup is selected in the action settings.
• Apply the header template display condition to 'Entire Site'.

Testing Frontend Functionality

13:07

Open the live website frontend. Click the hamburger/align icon within the newly published header. The off-canvas menu should slide smoothly in from the screen edge, showing the site branding, search bar, vertical navigation menu, and social links while overlaying the backdrop. Clicking the close button or outside the canvas dismisses the panel.

• Verify smooth slide-in and slide-out animation transitions.
• Confirm that links and the close button behave properly on the live site.