Off Canvas Woo Filter Widget

Hi there,

1. Try this CSS:

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

2. This should do it:

.woocommerce-widget-layered-nav {
    order: -10;
}

3. You could use our Disable Elements module along with the Elements module: https://docs.generatepress.com/article/layout-element-overview/

Let us know if you need more info :)

Hi Tom,

Thanks for your quick response.

`.woocommerce-widget-layered-nav {
order: -10;
}`

This works well. Asides, I've inserted the code to widget filter-by-price, so i try added this code.

.woocommerce-widget-layered-nav,
 .woocommerce-widget-price-filter {
    order: -10;

However the price filter still stay below
https://imgur.com/a/4PANOrc

P/s: sample page in private information.

Q1: Maybe my css isn't correct? Could you please advice what's the correct css?

You could use our Disable Elements module along with the Elements module: https://docs.generatepress.com/article/layout-element-overview/

I've tested this, it works. However it was my fault that didn't clearly state my objective haha.
I would want hide the menu in Off-Canvas at Shop & Category Archives. But not the whole primary navigation.
https://imgur.com/a/s1JXfvX

Q2. May i know how to hide the menu in Off-Canvas at Shop & Category Archives

Thank you Tom.

Regards,
Melvin

Try this:

.widget_price_filter {
    order: -9;
}

1. Where are you wanting it to display?

2. Try this:

.woocommerce .slideout-navigation .main-nav {
    display: none;
}

Hi Tom,

Thanks for the kind response.

`.woocommerce .slideout-navigation .main-nav {
display: none;
}`

I tested this code, it works to hide primary menu in off-canvas on Woo - shop page, category archieves, Tag Archieves and single-product.

Could it possibly not to hide on woocommerce single-product?

Thank you

Regards,
Melvin

Try this instead:

.woocommerce:not(.single-product) .slideout-navigation .main-nav {
    display: none;
}

Thanks Leo, it works.

Appreciate it

Regards,
Melvin

No problem :)