Responsiness issue with vertical filter

Hello,

I’m experiencing an issue with the horizontal filter on my website. When viewing the site on a desktop, instead of the filter collapsing into a hamburger menu as the window size is reduced, each attribute of the filter moves to a new line, which disrupts the layout. Additionally, on mobile devices, the hamburger icon does not appear at all. (See screenshot in attaches files: )

Could you please help me in resolving these issues so that the filter can display as a hamburger menu on both desktop (when the window is resized) and mobile devices?

Thank you in advance for your help.

Attachments:

You must be logged in to view attached files.

Hello,

1. On my side the burger menu appears – https://take.ms/hLWQG, let me know if you have sorted it out.

2. Remove the “Width” value for the container in which the filters are situated – https://take.ms/dIVXf4

Kind Regards

Hello,
What I meant is that the content of the product filter is not hidden like it should be. By the “hamburger”, I was talking about the little icon that will hide the attributes , like this for example : https://drive.google.com/file/d/1OeGopZaMd5oaz_XbJK70KJvYNcf7m3kO/view?usp=drivesdk

Hello,

Such a button is not available for the simple filter element. I suggest using our Custom off-canvas sidebar functionality to enable such a filter button on mobile. In order to activate the “Custom off-canvas sidebar” on the Layouts using Elementor, you need to do the following:

1). Make a section with 2 columns, one of them can contain the sidebar element or filter widgets and another will have your products element. https://take.ms/uti4Y
2). Edit the “Sidebar” column and in its settings set the Column role for “off-canvas layout” as “Off canvas”: https://take.ms/puKlD . Also, specify which devices you want to apply this on: https://take.ms/ZljnG

The column with the products should have the “Content column” value in the “​​Column role” field: https://take.ms/zC3J1

IMPORTANT: both sidebar and content columns should have the same devices selected.

Kind Regards

Hello,
I tried but it doesn’t work : https://drive.google.com/file/d/1QJ2oqCL4x4qXr6kD4yOcdZyfcSuQlK9c/view?usp=drivesdk

I just would like to be able to make a filter like this : https://drive.google.com/file/d/1KtWQ4IFRI64ffFZTXMXBgYx5QNrC3O-O/view?usp=drivesdk

Thanks

Hello,

Here is a video with more details: https://take.ms/gvc8w

Also, recheck our article on how to enable the Off-canvas sidebar – https://xtemos.com/docs-topic/custom-off-canvas-sidebar/

Kind Regards

Thanks a lot it works !

Hi Support,

I’ve implemented a sticky container in the off-canvas button that works fine on desktop with a 110px offset. However, when I try to adjust the offset for mobile and tablet, it creates a visual issue on desktop, mobile, causing a gap or misalignment at the top of the page.

Here’s the CSS I’ve tried:

@media (min-width: 768px) and (max-width: 1023px) {
  .wd-sticky-container-yes {
    position: sticky !important;
    top: 50px !important;
  }
}

@media (max-width: 767px) {
  .wd-sticky-container-yes {
    position: sticky !important;
    top: 10px !important;
  }

@media (min-width: 1024px) {
  .wd-sticky-container-yes {
    position: sticky !important;
    top: 110px !important;
  }
}

Could you advise on how to fix this?

Thanks you

Attachments:

You must be logged in to view attached files.

Hello,

Could you please update the password – https://take.ms/HEvYc ?

Thank you in advance.

Kind Regards

[Author]

Posts