BENTECH

Mastering Off-Canvas Menus & Headers in Elementor Pro

Learn how to build, style, and integrate custom off-canvas sliding navigation menus and modern headers using Elementor Pro's native Popup and Theme Builder tools.

This hands-on course teaches WordPress creators how to build off-canvas sidebar menus without third-party plugins. You will learn to leverage Elementor Pro's Popup Builder to configure slide-in drawers, design clean vertical layouts with search and social icons, prevent nested hamburger breakpoints, build custom headers in Theme Builder, and connect triggers via Dynamic Tags.

Section 1: Popup Architecture & Sizing Configuration

Configure viewport sizing, responsive positioning, and entrance/exit animations for off-canvas drawers.

Lesson 1.1: Creating and Sizing the Off-Canvas Canvas

  • Creating a Popup Template
  • Fit-to-Screen Height
  • Viewport Width & Directional Alignment

To create an off-canvas navigation menu in Elementor Pro, navigate to Templates > Popups and create a new template without choosing a pre-made library design. Open the Popup Settings in the bottom toolbar. Set the Width to 300px and the Height to 'Fit to Screen'. This guarantees that the drawer spans the full vertical viewport regardless of display size. Align the Content Position to 'Top'. Set Horizontal Position to 'Left' for desktop and tablet views, adjusting it to 'Right' for mobile if preferred. Elementor applies desktop styles down through mobile breakpoints unless specifically overridden.

Practical work

  1. Create a new popup template named 'Off-Canvas Nav'.
  2. Set Width to 300px and Height to 'Fit to Screen'.
  3. Configure Horizontal Position to Left and Vertical Position to Top.

Lesson 1.2: Animation, Overlays, and Drawer Styling

  • Slide In/Out Transitions
  • Animation Timing
  • Page Overlays and Close Buttons

Under the Popup Settings panel, locate the Entrance and Exit Animation controls. When an off-canvas menu sits on the left side of the screen, set Entrance Animation to 'Slide In Left' and Exit Animation to 'Slide Out Left'. Reduce the Animation Duration to approximately 0.8 seconds to deliver a brisk, native-feeling drawer experience. In the Style tab, set the panel's background color or choose an image. Keep the page overlay enabled with the default semi-transparent dark shade to dim background page content when the menu opens. Customize the Close Button with an accessible color (such as pure white) and increase its size and padding for touch devices.

Practical work

  1. Set Entrance Animation to Slide In Left and Exit Animation to Slide Out Left.
  2. Adjust the animation duration to 0.8 seconds.
  3. Style the close button with a contrasting color and verify overlay appearance.

Section 2: Designing Off-Canvas Content & Header Integration

Populate the off-canvas drawer with widgets and connect it to a custom header trigger button.

Lesson 2.1: Constructing Off-Canvas Drawer Layout and Widgets

  • Flexbox Container Layout
  • WordPress Menu Breakpoint Settings
  • Search Form and Social Icon Integration

Inside the popup area, insert a main full-width flexbox container. Inside it, place a horizontal row container to hold the Site Logo and Site Title side by side. Add a Divider widget, then add a Search Form widget configured with an inline layout. Duplicate the divider to create consistent visual rhythm between sections. Add a Heading widget (e.g., 'MENU') and drag in the WordPress Menu widget. Change the layout to Vertical and center the alignment. Crucially, set Mobile Dropdown Breakpoint to 'None'. Because the menu already lives inside a compact drawer, leaving breakpoints on default will collapse your links into an unnecessary nested hamburger button on small screens. Add another heading (e.g., 'Follow Us') and insert Social Icons, styling their primary and secondary colors to match your brand palette.

Practical work

  1. Build a top branding row containing the site logo and site title.
  2. Insert a vertical WordPress Menu and set Mobile Dropdown Breakpoint to 'None'.
  3. Add an inline Search Form and Social Media Icons.

Lesson 2.2: Publishing the Drawer and Header Trigger Setup

  • Publish Conditions without Triggers
  • Theme Builder Header Layout
  • Dynamic Tags Popup Triggers

Click Update on the Popup template. In the conditions and triggers dialog, click Next through Triggers and Advanced Rules without enabling any automatic options. Click 'Save & Close'—navigation menus must only open when requested by the user. Open Templates > Theme Builder and edit or create a site Header. Structure a main horizontal container with child columns using custom percentage widths (such as 70% for main navigation, 20% for search, and 10% for the menu icon). Insert an Icon widget and select an alignment or hamburger icon (e.g., 'align center'). In the Icon's Link setting, click the Dynamic Tags icon, navigate to Actions, and select 'Popup'. Click the Popup word in the field, choose Action: 'Open Popup', and type the exact name of your saved popup template ('Off the canvas 3'). Publish the Header template across 'Entire Site'. Test the live site to ensure clicking the header icon opens the off-canvas drawer smoothly.

Practical work

  1. Save the popup with no automated trigger conditions.
  2. In Theme Builder, add an Icon widget to the header layout.
  3. Link the Icon widget to Open Popup targeting your newly created off-canvas menu.
  4. Publish the header and test the toggle behavior on the live website.