Solved

How to fix product page toolbar issue on mobile?

AhmerAli
Shopify Partner
9 0 0

Hi, this is Ahmer Ali

I enabled the product sorting toolbar option on my collection page, but it was getting hidden under the product card. So I used the below code that was advised by one developer on the theme file so it works well

<style> .toolbar:not(.show-sticky) { z-index: 01 !important; } </style>

 

But now this toolbar is having an issue on the mobile, and is not working properly. Attached is the screenshot for the reference.

AhmerAli_1-1704720162854.png

 

I am facing the same issue for the collection page and below is the URL for more details

https://hztextiles.pk/collections/khaddar

 

Kindly help in this regards

Thank you

 

S Ahmer Ali
Accepted Solution (1)

ProtoMan44
Shopify Partner
146 13 23

This is an accepted solution.

@AhmerAli  paste this code in base.css 

.template-collection .background-overlay{
    display: none !important;
}



if your issue is solved then please hit like and mark it solved.

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!

View solution in original post

Replies 2 (2)

ProtoMan44
Shopify Partner
146 13 23

This is an accepted solution.

@AhmerAli  paste this code in base.css 

.template-collection .background-overlay{
    display: none !important;
}



if your issue is solved then please hit like and mark it solved.

- A thirsty developer passionate about supporting the community. If you'd like to, you can buy me a

Coffee

.
- Your Shopify Solution Specialist Get a Quote at Dev444- Whatsapp +92-3046185085
Crafting exceptional e-commerce experiences to elevate your online presence. Let's build your success story together!
AhmerAli
Shopify Partner
9 0 0

Thanks man its working

S Ahmer Ali