No results found. Try again with different words?
Search must be at least 3 characters.
- How to update plugin manually through FTP
- How to update UABB?
- How to register your license?
- About Beta Versions
- Will I lose all my design work when I download and re-install the plugin?
- Getting Started with the Ultimate Addons for Beaver Builder
- How can I install the Ultimate Addons for Beaver Builder?
- Automatic Beta Updates
- How to check expiration date of license?
- How to enable / disable Beaver Builder's UI?
- UABB Global Settings
- How to White Label UABB?
- How to enable / disable Live Preview feature?
- How to Hide Templates from your Clients?
- How can I use other modules in Modal Popup / Advanced Accordion / Advanced Tab?
- How to enable / disable modules in UABB to reduce server requests?
- Section and Page Templates don’t look the same when I am using them. Why?
- How can I Begin Building a Page using UABB?
- Troubleshooting Tips for Ultimate Addon’s Font Icons
- White Screen / Blank Screen / 500 Error After Installation
- Fatal error: Call to undefined function array_replace_recursive()
- How to Increase the Memory Limit of your site?
- Fatal error: Class 'FLBuilderAdminSettings' not found
- Failed to download template from Template Cloud
- Haven't received update notification yet?
- cURL error 51: SSL: No alternative certificate subject name matches target host name
- DIY Troubleshooting
How to Trigger Off-Canvas on the Click of a Menu Element?
The Off-Canvas module 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 module and set it as per your requirements.
Step 2: Open Display Settings of the Off-Canvas module. Select the Custom Class option from the dropdown menu.
![](https://www.ultimatebeaver.com/wp-content/uploads/2019/07/Add-custom-class-or-ID-1.png)
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 the click of which you wish to trigger an off-Canvas.
Step 5: Enable the CSS Classes option under the Screen Option settings
![](https://uaelementor.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.
![](https://uaelementor.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 an off-canvas window only on the page where you have added the off-canvas module. 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_off_canvas() {
echo do_shortcode('[fl_builder_insert_layout id="your-off-canvas-section-id"]');
}
add_action('wp_footer', 'ultimate_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 module you set in step 1 above as a 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!
We don't respond to the article feedback, we use it to improve our support content.