Show Sticky Off Canvas Sidebar Button on Desktop

Hi,

How can I make the sticky off canvas sidebar button show on desktop too? I like it on mobile devices, but I want it to show on desktop too? I think it’s very useful.

Thank you

Hello,

This option is available for the shop/category page and can be set in the Theme Settings > Shop page > Sidebar and titles.

Best Regards

Hi Elise,

I don’t see such an option for desktop. The option is only for tablet & mobile (which is already working great). I would like to enable it for DESKTOP too.

Thank you

Hello,

Have you resolved this problem as well? If you have not, please provide your site admin access to the private area.

Best Regards

Hi Elise,

This is not resolved yet. I’m including the login to my test site. Please tell me how I can apply the fix to my live site.

Thank you

Hello,

Please specify what problem do you have now? Your sticky sidebar works properly: https://gyazo.com/672b1e61c134c8add55d1ac1c033421d

Best Regards

Hi Elise,

I was not talking about the off canvas side bar. It does work good. I just wanted to show the sticky filter (see attached screenshot) on desktop too. Currently it shows on mobile devices only.

Thank you

Attachments:

You must be logged in to view attached files.

Hello,

Now I see what you mean. Yes, the filter sidebar is available for mobile-only. As you can see in the Theme settings, this option has the description: “Display the filters button fixed on the screen for mobile and tablet devices.”

Best Regards

Hi Elise,

I know the sticky filter is available for mobile only. My question was: how can I enable it for desktop too? Since I use no sidebar on my category pages, I really need to show the sticky filter on desktop too. Please share with me how to do it.

Thank you

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

body .offcanvas-sidebar-mobile .woodmart-sticky-sidebar-opener {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
    transform: none;
    pointer-events: unset;
}

Best Regards

Hi Elise,

I tried it, but still no sticky filter on desktop. Please use the provided login to my test site, to see why it’s not working.

Thank you

Hello,

Please add this code to the Theme Settings > Custom CSS > Desktop:

body.offcanvas-sidebar-desktop .woodmart-sticky-sidebar-opener {
    display: block;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
    transform: none;
    pointer-events: unset;
    z-index:400;
}

Please remove the code provide before.

Best Regards

Thank you very much Elise. It works great now. Just before we close this topic: can you please tell me how I can make the sticky filter show only after the page is scrolled down (for about 200px)?

Hello,

Replace the code in the Theme Settings > Custom CSS > Desktop

body.offcanvas-sidebar-desktop .woodmart-sticky-sidebar-opener {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: unset;
    z-index:400;
}
body.offcanvas-sidebar-desktop .woodmart-sticky-sidebar-opener.woodmart-sidebar-btn-shown {
    -webkit-transform: none;
    transform: none;
}

Add this code into the Theme Settings > Custom JS on document ready:

function stickySidebarBtn () {
        var $trigger = jQuery('.woodmart-show-sidebar-btn');
        var $stickyBtn = jQuery('.shop-sidebar-opener:not(.toolbar)');
        if ($stickyBtn.length <= 0 || $trigger.length <= 0 || jQuery(window).width() < 1024) return;
        var stickySidebarBtnToggle = function () {
            var btnOffset = $trigger.offset().top + $trigger.outerHeight();
            var windowScroll = jQuery(window).scrollTop();
            if (btnOffset < windowScroll) {
                $stickyBtn.addClass('woodmart-sidebar-btn-shown');
            } else {
                $stickyBtn.removeClass('woodmart-sidebar-btn-shown');
            }
        };
        stickySidebarBtnToggle();
        jQuery(window).scroll(stickySidebarBtnToggle);
        jQuery(window).resize(stickySidebarBtnToggle);
    };
stickySidebarBtn();

Best Regards

[Author]

Posts