Safari: Shopin Offcanvas Menu Item Toggle not possible - Forum | JoomShaper
Solved Templates

Safari: Shopin Offcanvas Menu Item Toggle not possible

Asked by bergwerk 1 month ago Last activity 1 month ago

Hey there,

I noticed that with the Template "Shopin" there is an issue with the offcanvas menu in SAFARI browser when trying to toggle menu items. whilte it is possible to expand subitems, it is not possible to collapse them anymore.

You can test it for yourself on the demo page:
https://demo3.joomshaper.com/2017/shopin/

Also see screenshot: https://ibb.co/3yQNXG1n

As far as i can tell this issue only appears on Safari.

Can you please provide a fix for that? Thank you!

Accepted answer

Marked as the solution
Ziaul Kabir Staff

Please, try to use this custom js, in here : https://prnt.sc/hYNWTMvYdnUL you will see Custom Javascript field, paste this code there.

document.addEventListener('DOMContentLoaded', function () {

    document.querySelectorAll('.offcanvas-inner .offcanvas-menu-toggler').forEach(function (toggler) {

        // Prevent Bootstrap from handling the same click
        toggler.removeAttribute('data-bs-toggle');

        toggler.addEventListener('click', function (e) {
            e.preventDefault();
            e.stopPropagation();

            var targetSelector = toggler.getAttribute('data-bs-target');

            if (!targetSelector) {
                return;
            }

            var target = document.querySelector(targetSelector);

            if (!target) {
                return;
            }

            var isOpen = target.classList.contains('show');

            if (isOpen) {
                // Collapse
                target.classList.remove('show');
                toggler.classList.add('collapsed');
                toggler.setAttribute('aria-expanded', 'false');
            } else {
                // Expand
                target.classList.add('show');
                toggler.classList.remove('collapsed');
                toggler.setAttribute('aria-expanded', 'true');
            }
        });
    });

});

Thanks.

4 more replies

Ziaul Kabir Staff

Hi,

Thanks for reporting this and for the detailed information.

I can see the issue you’re referring to with the Shopin offcanvas menu in Safari. I’ve forwarded this to our Template team for further investigation and a proper fix.

If the issue occurs on your site, Let me know, I will share the workaround with you.

Thank you for your patience and for bringing this to our attention.

Best Regards,

bergwerk Asked this

Thanks for your answer - a workaround would be appreciated. Please note, that i cannot share access to our site.

bergwerk Asked this

Thank you for your quick response - This seems to work perfectly!

Ziaul Kabir Staff

You are welcome.

Log in to reply.