Hi there!

Sorry for your issue.

For your offcanvas issue, you can use the following code in your custom CSS:

#sp-header .row {
        display: flex !important;
}
#sp-menu {
       flex: auto !important;
}

You can use media query to adjust your breakpoint to appear the offcanvas logo in that specific resolution. Here is sample code for you:

@media (max-width: 1024px){
#offcanvas-toggler {
        display: block !important;
}
.sp-megamenu-parent{
        display: none !important;
}
}

Hope this helps!

Note: Path towards custom CSS(Joomla 3): Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.

Best Regards