/
No results found. Try again with different words?
Search must be at least 3 characters.
- How to activate Ultimate Addons for Elementor license?
- How to Get License Key of Ultimate Addons for Elementor?
- About Beta Versions
- How to install the Ultimate Addons for Elementor plugin?
- Getting Started with Ultimate Addons for Elementor
- Enabling Automatic Beta Updates for UAE
- How Can I Upgrade the License?
- How to Update Ultimate Addons for Elementor Plugin?
- How to update any plugin manually through FTP?
- About Beta Versions
- How to Enable / Disable Widgets in UAE to Reduce Server Requests?
- How to White Label UAE?
- Getting Started with Ultimate Addons for Elementor
- UAE Saved Sections
- How to create Google API key in Google Maps Widget of UAE?
- White Screen /500 Error After Plugin Installation
- How to Increase the Memory Limit of your site?
- Unable to see the Font Awesome 5 Icons in UAE’s widgets?
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.
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](https://ultimateelementor.com/wp-content/uploads/2019/04/enable-css-class-under-screen-options-1.png)
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](https://ultimateelementor.com/wp-content/uploads/2019/04/add-css-class-off-canvas.png)
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](https://ultimateelementor.com/wp-content/uploads/2019/04/off-canvas-save-template.png)
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 doc helpful?
What went wrong?
We don't respond to the article feedback, we use it to improve our support content.
On this page