Close button Off Canvas Navigation using Oxygenbuilder

Do you want to have a fully customized close button in Off Canvas Navigation using Oxygenbuilder and OxyExtras - then here is a quick guide for that:

See this GIF for an example:

The little white close icon, is made with HTML and a SVG file. Pretty simply.

Here is this HTML:

<a href="#" id="closeOffCanvasButton">
<img src="SOURCE FOR SVG FILE" />
</a>

And then I'm using Oxygenbuilder for creating the Off Canvas Menu, with the OxyExtras extension

So this jQuery is working, if you are using OxyExtras, and creating Mega Menu and Off Canvas Menu.

Note that this jQuery is only doing what the native close button from OxyExtras is doing, but this close button is more controllable - so it's possible to add it where you want.

jQuery(document).ready(function ($) {
    // Function to close off-canvas menu
    function closeOffCanvas() {
        // Hide the off-canvas menu and backdrop
        $('#off-canvas-main').removeClass('oxy-off-canvas-toggled');
        $('.oxy-offcanvas_backdrop').fadeOut();

        // Set aria-expanded attribute to false on the burger trigger button
        $('#burger-trigger button').attr('aria-expanded', 'false');

        // Enable scrolling on the body
        $('body').removeClass('oxy-offcanvas-open off-canvas-toggled toggledoff-canvas-main');
        $('html').removeClass('off-canvas-toggled toggledoff-canvas-main');
    }

    // Add click event listener to the custom close button
    $('#closeOffCanvasButton').on('click', function (event) {
        event.preventDefault(); // Prevent the link from navigating if needed
        closeOffCanvas();
    });

    // Add click event listener to the burger trigger button
    $('#burger-trigger button').on('click', function () {
        // Set aria-expanded attribute to true when opening the off-canvas
        $(this).attr('aria-expanded', 'true');
    });
});

Important

Remember to change toggledoff-canvas-main and #off-canvas-main with the Class and ID from Oxygen. These might be autogenerated so there is a -3453 something at the end.
I have customized every Class and ID in Oxygen, so there is some niceness to it.

If you want to remove the native close button, then this CSS can work:

body.off-canvas-toggled div#burger-trigger {
    display: none;
}