Slideout filters – GeneratePress

This topic has 9 replies, 2 voices, and was last updated 3 years, 2 months ago by Ying.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
February 6, 2021 at 12:55 pm #1648497
roadlink
Hello,

I have filters on slideout menu but seems weird.
Any suggestion?

Thanks in advance.

https://prnt.sc/yk64of
```
.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;
}
.woocommerce-widget-layered-nav .select2-container--default .select2-search--inline .select2-search__field {
    width: unset !important;
	}
.select2-container--open {
    z-index: 999999;
}
```
February 6, 2021 at 5:22 pm #1648641

Ying
Staff
Customer Support

Hi Tertas,

Where’s the slide out menu in question? I don’t see the same as your screen shot.
https://www.screencast.com/t/4EjcOH7vjhq

Let me know 🙂

February 7, 2021 at 1:44 pm #1649558

roadlink

Hello Ying,
I paste URL in private section.
When I enter categories, filters starts to shown.

February 7, 2021 at 2:36 pm #1649599
Ying
Staff
Customer Support
Are you saying they are not vertical aligned in your screenshot? try this CSS:
```
.main-navigation.slideout-navigation .inside-navigation {
    align-items: flex-start;
}
```
Let me know 🙂
February 8, 2021 at 8:18 am #1650561

roadlink

Dear Ying,

Yes, attribute filters are show not aligned.
I have added your code but no luck.

February 8, 2021 at 10:54 am #1650740
Ying
Staff
Customer Support
Try to add this CSS as well:
```
body .slideout-widget.woocommerce ul li:not(.chosen):not(.select2-search) {
    display: block;
}
```
February 8, 2021 at 12:53 pm #1650884

roadlink

Hello Ying,
Looks much nicer now but how I can put each attiributes under each other?
https://prnt.sc/yr74o6

February 8, 2021 at 2:09 pm #1650941
Ying
Staff
Customer Support
Add this:
```
.main-navigation.slideout-navigation .inside-navigation {
    display: block;
}
```
Let me know 🙂
February 8, 2021 at 9:47 pm #1651151
roadlink
Worked perfect, thanks.
In case some other needs codes for Prime demo here are the codes for off canvas menu.
```
/* GP Amazon Prime Slideout CSS */
.woocommerce-widget-layered-nav .select2-container--default .select2-search--inline .select2-search__field {
    width: unset !important;
	}
.select2-container--open {
    z-index: 999999;
}
.slideout-navigation .woocommerce-widget-layered-nav-list__item a {
    display: inline-block;
}
.main-navigation.slideout-navigation .inside-navigation {
    align-items: flex-start;
	  display: block;
}
body .slideout-widget.woocommerce ul li:not(.chosen):not(.select2-search) {
    display: block;
}
```
February 9, 2021 at 2:16 pm #1652292

Ying
Staff
Customer Support

You are welcome and thanks for sharing with us 🙂
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

[Resolved] Slideout filters

Popular Articles

Start building better websites today.