Sidebar on mobile by click

Updated the changed CSS here to include the Select field:

https://generatepress.com/forums/topic/sidebar-on-mobile-by-click/#post-1513282

Hi David,

Really appreciated for you time.

But the issue is still there. https://prnt.sc/vcj3rg

1. Attribute name is not shown fully.
2. Values can't be seen or select.

The widget has inline styling that is limiting it to 100px.
Try this CSS to overcome that:

.woocommerce-widget-layered-nav .select2-container--default .select2-search--inline .select2-search__field {
    width: unset !important;
}

Hello David,

Yes, this solve the #1.
But still there is no attribute in there. This is weird.

Hi there,

Does this CSS help?:

.select2-container--open {
    z-index: 999999;
}

Hi Tom,

Yes, It works.

Thanks

No problem!

Hey there,
I just realized that when we choose an attribute, it moves count in second line.

https://prnt.sc/vjj1tt

Here is the CSS I am using.

.slideout-widget.woocommerce ul li:not(.chosen):not(.select2-search) {
    line-height: 2em;
    display: grid;
    grid-template-columns: 0 90% 10%;
}
.slideout-navigation .slideout-widget ul.product-categories li {
    grid-template-columns: 90% 10%;
}

.slideout-widget {
    border-top: 1px solid #ccc;
    padding-top: 1em;
}

Try adding this:

.slideout-navigation .woocommerce-widget-layered-nav-list__item a {
    display: inline-block;
}

thx Tom, solved like this https://prnt.sc/vkv1am

Awesome :)