How can I fix the mobile filter and sort sidebar issue?

Store Design
, ,
1

Hi,

My “filter and sort” sidebar filter on MOBILE is totally messed up. Can you help me fix that? Screens are from a iPhone 15 pro max. I’m using this templatemonster theme:
Body Builder - Sport Nutrition Shopify Theme (templatemonster.com)

www.olympus-training.shop

Filter1.jpeg
Filter1.jpeg1290×2564 111 KB

Filter2.jpeg
Filter2.jpeg1289×2726 112 KB

2

Hello @Jay_Olympus ,

Please add this css in styles.css

.tl-custom-position.bottom-left{
    z-index: 1;
}

Thanks,

Ritu

3

Thanks for the reply, but I can’t use that. Then the language switcher moves behind other parts of the website. I’d prefer to have a filter sidebar with a shorter and fixed height, as there isn’t much in it anyway.

4

@Jay_Olympus ,

Okay if you want to make it as fixed height then use this CSS :

.mobile-facets__inner{
    height: 75%;
}
5

Doesn’t work. Maybe I have to remove the sliding sidebar first?

6

@Jay_Olympus ,

Just add this

@media(max-width: 479px){
.mobile-facets__inner{
    height: 75% !important;
}
}
7

Ok, the height is shorter now. But the “sliding” effect is still messy. And the currency in the price range needs to be fixed (currency overlapping with the customers input). I would attach a video record of the mobile screen, but can’t do it here.

FIlter4.png
FIlter4.png645×1398 146 KB

8

This overlay filter menu really starts to annoy me. Is there a way to completely remove it on mobile?