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

[ddai]

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.

[GemPages]

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

[ddai]

My store link is ysamani.com

[GemPages]

Hello @ddai 

Thanks for your reply

Do you want it to looks like this

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

[ddai]

Yes! This is exactly what I am looking for.

[GemPages]

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

[ddai]

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]

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

[ddai]

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