Home › Forums › WoodMart support forum › Show Sticky Off Canvas Sidebar Button on Desktop

Show Sticky Off Canvas Sidebar Button on Desktop

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • September 27, 2019 at 5:02 pm #147095

    uandi
    Participant

    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

    September 27, 2019 at 8:22 pm #147136

    Elise Noromit
    Member

    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

    September 27, 2019 at 9:28 pm #147148

    uandi
    Participant

    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

    September 28, 2019 at 2:17 pm #147249

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    September 29, 2019 at 2:06 am #147305

    uandi
    Participant

    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

    September 29, 2019 at 9:29 am #147335

    Elise Noromit
    Member

    Hello,

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

    Best Regards

    September 29, 2019 at 10:41 pm #147427

    uandi
    Participant

    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.
    September 30, 2019 at 6:11 am #147448

    Elise Noromit
    Member

    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

    September 30, 2019 at 4:27 pm #147617

    uandi
    Participant

    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

    September 30, 2019 at 10:00 pm #147676

    Elise Noromit
    Member

    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

    September 30, 2019 at 11:43 pm #147682

    uandi
    Participant

    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

    October 1, 2019 at 8:47 am #147773

    Elise Noromit
    Member

    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

    October 1, 2019 at 2:22 pm #147869

    uandi
    Participant

    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)?

    October 2, 2019 at 7:05 am #147968

    Elise Noromit
    Member

    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
Viewing 14 posts - 1 through 14 (of 14 total)