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

Technical Q&A
,

Topic summary

A Shopify website owner is experiencing CSS z-index issues where button borders and product image magnify icons overlap incorrectly when headers or cards open.

Initial Problem:

  • Button and magnify icon borders display over header sections and product cards
  • Three screenshots demonstrate the overlapping behavior

Solutions Provided:

Moeed’s approach:

  • Add custom CSS code to theme.liquid file (above </body> tag)
  • Code snippet provided but appears corrupted in the thread

SideNode’s approach:

  • Apply CSS mentioned in first screenshot to fix overlapping content
  • Screenshots included showing the implementation

Remaining Issue:

  • After implementing Moeed’s solution, most problems resolved
  • New problem emerged: when product section and header are both open, clicking the Home button incorrectly triggers the product image click instead
  • Video demonstration provided showing the click-through behavior

Status: Partially resolved - original overlapping fixed, but click event handling issue persists and awaits further guidance.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
4

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

WhatsApp Video 2023-06-27 at 11.56.16.gif