Re: Cart drawer overlay

How can I prevent the header from dimming when opening the cart drawer?

ddai
Excursionist
22 0 2

Do any of you know a way to not have the header dimmed when I open the cart drawer? The same as the hamburger menu. When I open the hamburger menu, everything is dimmed except for the header and the menu itself. I am thinking it is coding to add padding to the top of the overlay when the cart is opened. Thank you for any and all help.

 

ddai_0-1677030293552.png

 

 

ddai_1-1677030293516.png

 

 

Replies 8 (8)

GemPages
Shopify Partner
5625 1262 1248

Hello @ddai 

 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

 

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ddai
Excursionist
22 0 2

My store link is ysamani.com

GemPages
Shopify Partner
5625 1262 1248

Hello @ddai 

Thanks for your reply

 

Do you want it to looks like this

GemPages_0-1677031723319.png

I hope the above is useful to you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ddai
Excursionist
22 0 2

Yes! This is exactly what I am looking for.

GemPages
Shopify Partner
5625 1262 1248

Thanks for your reply.

 

Kindly follow the steps below:

1. Go to your Online store > Themes > Edit code
2. Open your theme.liquid file
3. Paste the below code before </body>

 

<style>
.section-header.shopify-section-group-header-group {
    z-index: 99999 !important;
}
</style>

 

I hope the above is useful to you.
Best regards,
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ddai
Excursionist
22 0 2

Now I am running into the issue where once the cart is open, I cannot close it using the same button. I am very thankful for your help and I promise that is all I need!

GemPages
Shopify Partner
5625 1262 1248

You try adding the code before </style>

.drawer.active{
z-index:99999 !important;
}

However, because there is a bit of a conflict with the theme, after you add the code, you will turn off the cart drawer by clicking outside the drawer like the video: https://www.loom.com/share/a57cf52c4b0b422da1d80506d549591a

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
ddai
Excursionist
22 0 2

Is there a way to add a separate identical button on top that will close the drawer by chance?