How do I set the background colour to black when header details are shown?

Store Design

Topic summary

A user encountered an issue where their header’s background color becomes transparent when hovering away from an expanded summary/details element, despite wanting it to remain black.

Initial Problem:

  • Header correctly turns black on hover and scroll
  • When summary details are expanded and mouse leaves the area, header loses hover effect and becomes transparent again
  • User needed the background to stay black when summary is visible

Solutions Provided:
Two support representatives (PageFly-Oliver and Dan-From-Ryviu) offered similar CSS solutions:

  • Both involved adding custom code to the theme.liquid file
  • Access via: Online Store → Theme → Edit code
  • Code should be pasted before the closing </head> tag

Resolution:
The user confirmed the code worked successfully and thanked the contributors. The issue appears to be resolved.

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

Hi @zenir_official ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly