Responsive Filter Menu

I feel the filter menu should collapse the same way the main menu does in smaller screen sizes.

With a left, filter sidebar, the filters take up way too much space.



Anybody know how to achieve this?

Electronics 2014-08-26 10-01-03.png

Hello Paul



There are 3 variants:



1.

Hide filter elements for small screens by default.

For example, use custom styles:

@media (max-width: 767px) {

.ty-price-slider,

.ty-product-filters {

display: none;

}

}

See screenshot in Attached Thumbnails.



2.

Move the filters to the right column. Then filters will be below the central content on small screens.



3.

You can try to set the grid in the block manager: the column`s grid and grid of the main content.

But, I do not advise you to change the size of the grid in the main theme styles.

Typically, developers are carefully calibrate grid sizes.

column_style.png

Thanks Katrin,



option 1 maybe an acceptable workaround but I think I will try the more elegant way and add some bootstrap classes to get a proper collapsing menu.

Does anyone already have a good solution for having the filters folded down on a mobile?

Yep, this theme

http://demo.themehills.com/cscart/t_emerald_theme/electronics/computers/

Does anyone already have a good solution for having the filters folded down on a mobile?

Try to add the following code to the CSS section of the Theme editor

@media screen and (max-width: 480px) {
    .ty-product-filters, .ty-price-slider {
        display: none;
    }
}

making the entire block invisible on mobile is not a really good solution. Does anyone know a good fix for mobile? So that you can collapse the filters?

Agreed, default filter handling for mobile devices is terrible.

Nice theme Darius. I might use your theme, if I can't find a quick and easy solution. Pricing is good. But I know it will take much time to convert over. For $65 I might just get it to play with on my demo site.

Ecom - Tried your code by putting it into CSS mychanges at the bottom and top - no change

Thanks

Ken

Ecom - Tried your code by putting it into CSS mychanges at the bottom and top - no change

The mentioned code works with price filter only. Do you have filter by price in your store?