Off canvas sidebar for desktop as same as mobile

We wanted to have an Off-canvas sidebar for desktop as same as mobile in our shop. So, we have considered all support forum in this regard and found and put the following customize CSS and JS code:

Custom CSS for 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;
}

Global Custom JS:
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();

Now, on the shopping page, all functionality is well. But on the product page we have two issues:

– By clicking on the filter icon, it shows just a full dark cover on the page. Please see this screenshot: https://nimb.ws/uJlNk4 or test this issue live here as a sample https://brainbowtoys.de/shop/spielzeug-typ/konstruktion-typ/pixio-orange-animals/
– If the above issue could be solved, don’t need to have the right side of the product page. It means we would like to have a full-page product page with a sticky filter menu icon.

Your kindly advice would be greatly appreciated.

Kind regards

Hello,

I have test your site, that sticky sidebar not working fine on the product page but works perfect in shop page.

To fix it on product pages in large devices, could you please try the below CSS code in global custom CSS area under theme settings >> custom CSS:

@media (max-width: 1400px){
.Single-product .offcanvas-sidebar-mobile .sidebar-container.single-product-sidebar {
flex-basis: auto;
max-width: none;
width: 300px;
}
}
.single-product .woodmart-close-side-opened {
opacity: 0;
}

After applying this CSS code check after clearing the site and browser cache.

Best Regards.

Hi,
Whilst thanking you, unfortunately, it is not working still.
As well as there is the same issue to show the filter block in product page of a brand. See here
https://nimb.ws/gYBNMn or test it here https://brainbowtoys.de/marke/guidecraft-de/

In case, I provide you the admin login information in the private message.

Your prompt assist would be greatly appreciated.

Hello,

I have tried to login to your website and was unable to login because maintenance mode is activated. Please disable maintenance mode and then send me admin panel login details to check it myself and help you out accordingly.

Best Regards.

Hi,
I don’t know how and why have you found our shop in maintenance mode. It is working well in both back and front page. Please try once again with the same login data that I have provided you already.

Hello,

I have tried to login several times to the website but I am unable to login. Please provide correct admin panel login details So I can check it myself and help you out accordingly.

Best Regards.

Hi,
Please believe me, the login info that I sent already is correct. I have tested it once again right now. I am working with this same info. Please try again. Anyway, I send the info once again by private message.

I have found that the first message has been sent the wrong data for other domains. please accept my apologies.

Hello,

From where you get that additional code to display that sidebar in desktop screens? Actually that sticky sidebar is only available for shop page not for single product page that’s why its not working in single product page.

You can enable or disable it from theme settings >> Shop >> SIDEBAR & PAGE TITLE >> Sticky off canvas sidebar button. If you want to hide the filter button from single product page then let us know we can provide you CSS code to hide that opener. But it’s not possible to fix it for single product page it requires additional JS codes which is beyond our limitations and support policy.

Best Regards.

Hi,
As I explained in the first message, I have found the code by searching in forum support.
So, please provide me a CSS code to hide the filter button from single.

As well as there is the same issue to show the filter block in product page of a brand. See here
https://nimb.ws/gYBNMn or test it here https://brainbowtoys.de/marke/guidecraft-de/

Hello,

To hide that filter button from the single product page use the below CSS code in global custom CSS area under theme settings >> custom CSS:

.single-product .offcanvas-sidebar-desktop .woodmart-sticky-sidebar-opener {
display:none;
}

To fix that brand page issue remove the extra CSS code from you global custom CSS area and from CSS for desktop area as well.

Best Regards.

Hi,
I have done all job according to your notes and advice. Unfortunately, nothing is changed.
– Sticky Filter Icon on the product page is still there.
– Sticky Filter Menu on the brand page is not working well (After clicking is coming a dark cover on the page).

Hi,
Please be informed that I have changed the default of the product page without the sidebar. Hence, If just solve the problem on the brand page, would be sufficient.

Sticky Filter Menu on the brand page is not working well (After clicking is coming a dark cover on the page).

Hello,

I have fixed the issue on your website. Now it’s working absolutely fine on my end. Please clear the cache and check back.

Screenshot for Clarification : https://www.screencast.com/t/usWyJ2d5h4l

I have added the following code in Theme Settings >> Custom CSS >> Custom CSS for Desktop.

.woodmart-close-side.woodmart-close-side-opened {
z-index: 1;
}

Best Regards.

Hi,

With many thanks for your kindly assist, as I found by try out now, after opening the filtering sticky window, to close ii must be click once again on the filtering icon. But on the shop page, just by clicking outside the block it will be closed automatically. Is it possible to make it with the same functionality?
Many thanks again.

Hello,

Thank You So Much.

I have visited your site by removing the global custom CSS and desktop CSS for a while the sidebar goes hidden when we click anywhere on the screen. So it’s clear that this issue is due to your custom CSS code.

Just undo the other CSS and then check back your site.

Best Regards.

[Author]

Posts