Assistance Needed with Mobile Filter Scrolling Issue

Hello,

my clients and I are experiencing the following issue: in our store, there are many filters. On the mobile version, when several filters are expanded, an outer scrollbar appears indicating that there are more filters below the screen. However, if I have expanded filters that also have their own scrolling, I first have to scroll inside them before I can scroll down to see the other filters. I would like your assistance with this issue.

What I would like: in the attached screenshot, the mobile filters’ background should become full width so that users can scroll the screen freely. At the moment, when trying to scroll down, the filter closes entirely, which is very inconvenient.

I hope I explained clearly what I mean.

I am attaching a screenshot for reference. Please assist me with a possible solution.

Best regards,
Nikola

Attachments:

You must be logged in to view attached files.

Hello,

This happens because on mobile, the off-canvas filter sidebar has nested scroll areas:

• The sidebar itself scrolls, and
• Each expanded filter block also has its own scroll.

This is why you first have to scroll inside a filter before reaching the others, and sometimes the panel closes unexpectedly.

“Shop sidebar widgets collapse” option in Theme Settings > Product Archive > Widgets. Setting it to Disable only prevents the filters from collapsing (accordion behavior).

Best Regards,

Hello,

Thank you for the explanation – this definitely makes things clearer and it is somewhat better now.

However, I am wondering if there is a way to make the off-canvas sidebar full screen(full width) on mobile? From a usability point of view, I don’t really see the benefit of it being partial width, especially since filters are an important interaction element. (achieved with settings or css)

So I will avoid nested scroll issues, improve user experience, prevent accidental closing

Best regards, Nikola

Hello,

Try to add this code in Theme Settings > Custom CSS > Custom CSS for mobile.

.wd-col-offcanvas-sm.wd-side-hidden {
        --wd-side-hidden-w: 100% !important; /* override variable */
    }

Best Regards,

Hello, master, it works!

You can close ticket.

Best regards, Nikola

Hello,

You’re Most Welcome!

Feel free to write back anytime. If you need further assistance, we are always here to help you.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://tally.so/r/w4l54k

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts