Archived topic

Slideout filters

9 replies · Started by roadlink on February 6, 2021

Viewing posts 1–10 of 10

February 6, 2021 at 12:55 pm #1648497

Hello,

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

Thanks in advance.

.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

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

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

February 7, 2021 at 2:36 pm #1649599

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

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

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

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

Add this:

.main-navigation.slideout-navigation .inside-navigation {
    display: block;
}

Let me know :)

February 8, 2021 at 9:47 pm #1651151

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

You are welcome and thanks for sharing with us :)

This archived topic is closed to new replies.

Start building better websites today.