No results found. Try again with different words?

Search must be at least 3 characters.

    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.

    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

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

    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!

    Was this article helpful?

    Did not find a solution? We are here to help you succeed.

    Related Docs

    Grab this rare opportunity to save up to 50%

    WOAH, HOLD ON THERE!

    Don't Miss Our Biggest Discount

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    You are backed by 100% risk-free money-back guarantee.

    Grab Our Biggest Discount Of All Time. Don’t Miss Out!

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Free Download

    Enter your name & email address to download this awesome freebie.

    Scroll to Top