CSS Issue: Overlapping Borders of Button and Magnify Icon when Header or Card Opens

[decrockery]

Hello, Shopify community,

I hope you're all doing well. I recently created a Shopify website and I'm facing a CSS issue that has been causing me some trouble. Specifically, when the header section or a card opens over the button or the product image magnify icon, the borders of the button and magnify icon end up overlapping with them.

I have been trying to resolve this issue on my own, but unfortunately, I haven't been successful so far. I believe that the solution might involve adjusting the CSS properties or perhaps utilizing a different approach altogether.

I would truly appreciate any guidance or suggestions you can provide to help me resolve this problem. How can I ensure that the borders of the button and magnifying icon do not overlap when the header or card opens?

Thank you so much for your time and assistance. I look forward to hearing your valuable insights and recommendations.

Best regards,

Utkarsh Goyal

 

[Moeed]

Hey @decrockery 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
    z-index: -1 !important;
}
.quantity:after {
    z-index: -1 !important;
}
span.product__media-icon.motion-reduce.quick-add-hidden.product__media-icon--hover {
    z-index: -1 !important;
}
</style>

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[decrockery]

Hey @Moeed ,

Thank you for your assistance in resolving the previous issues. I followed the steps you provided, and everything is working fine now. However, there is one remaining issue that I would like to address.

When the product section is opened and I open the header, if I click on the Home button, the product image is still being clicked instead. This behavior is not desired, and I would appreciate further guidance on how to prevent the product image from being clicked when the header is open.

Once again, thank you for your help in resolving the previous issues. I look forward to your response regarding this remaining concern.

Best regards,
Utkarsh Goyal

[SideNode]

Hi @decrockery 
Its SideNode! We will be happy to help you today.

Apply the mention css in first screenshot to set your overlapping content .

Let me know if need further assistance
Regards,
SideNode