How to Trigger Off-Canvas on the Click of a Menu Element?

The Off-Canvas widget of the Ultimate Addons for Elementor allows you to display the off-canvas based on various actions. In this article, we’ll see how to trigger an off-canvas on the click of a WordPress Menu element. You can do this using a custom CSS class.

Here are a few steps you need to follow:

Step 1: Drag drop Off-Canvas widget and set it as per you requirements.

Step 2: Open Display Settings of the Off-Canvas widget. Select the Custom Class option from the dropdown menu.

Add your custom class name in the field as shown below.

Elementor Off-Canvas display settings

Step 3. Now go to WordPress Dashboard -> Appearance -> Menu

Step 4. Create a Custom Menu element on click of which you wish to trigger an off-Canvas.

Step 5. Enable the CSS Classes option under the Screen Option settings

WordPress menus advance settings

Step 6. Add the respective CSS class name ( the one you entered in step 2 ) under the selected menu element.

Add css class to WordPress menu item

Also, select the location you wish to display the menu element on. Like we’ve selected Primary Menu in the screenshot below.

Trigger the Off-Canvas Sitewide

The above process will open off-canvas window only on the page where you have added the off-canvas widget. If you wish to trigger this Off-Canvas on the entire website and make it work with all your pages/posts, use the ‘wp_footer‘ hook with a PHP function. You can paste the following code into the functions.php file of your theme/child theme.

function ultimate_elementor_off_canvas() {
echo do_shortcode( '[[uael-template id="your-off-canvas-section-id"]]' );
}
add_action('wp_footer', 'ultimate_elementor_off_canvas');

You would need to replace your-off-canvas-section-id in the above code. To get this ID, follow steps below –

1. Save the off-canvas widget you set in step 1 above as a template.

Elementor save off canvas menu as template

2. Get the ID for this saved template. Refer to an article here.
This assures that the Off-Canvas you just created, will be displayed on all the pages/posts of your website!

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Get access to growing library of 50+ innovative widgets and 300+ creative templates.

Scroll to Top