Scrollbar width, CSS

Hello,
how do I do to make the scrollbar wider in the filter menu?

I have tried to change ::-webkit-scrollbar { width: 8px; } in many ways and classes, but it has no affect. I think it now has 3px width as default, but I need maybe 6px. Very hard to use the scrollbar in the filter widget right now (desktop).

Thank you.

Hello,

By replacing all the widgets with WoodMart Layered Navigation widget, all your filters would have the scroll, like this. https://woodmart.xtemos.com/shop/

But in your shop I did not see any scroll in your filters.And you want to make the filter scrollbar wider.

Kindly share your page URL where the scroll shown as well as your login credentials so I can provide you some possible solutions to achieve this.

Best Regards.

Hello,
that is how it looks like, and the scrollbar in the filter is to small in width. Hard to click on on desktop.

The filter is opened when you click on the filter button. Details in private

Hello,

The URL that you share with me does not contain any sidebar filter. As there is no filter in the sidebar that’s why I did not see any filter scrollbar.

Screenshot: Removed as per your request

In case if you want to change the width of scroll bar shown in the drop down filter then share your login details I will help you out.

Best Regards.

Hello,
it is hidden, you need to click on the filter button, a standard feature in your theme.

Hello,

You can use the below CSS code in Theme Settings >> Custom CSS >> Global Custom CSS to make the scroll bar wider:

.disabled-nanoscroller .woodmart-scroll .woodmart-scroll-content::-webkit-scrollbar {
    display: block;
    width: 10px;
}

Result: Removed as per your request

Best Regards.

Thank you, works perfectly. How do I do the same for the main filter container scroll, in this div

class=”sidebar-inner woodmart-sidebar-scroll”

Most Welcome,

You can use the below CSS code for main sidebar scroll:

.disabled-nanoscroller .woodmart-scroll ::-webkit-scrollbar, .disabled-nanoscroller .woodmart-sidebar-scroll ::-webkit-scrollbar {
    width: 10px;
}

Result: Removed as per your request

Best Regards.

Hello

Well, blt!.., it’s been great chatting with you! I hope I resolved your issues thoroughly.

I have removed all the images from this topic as per on your request.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts