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.
4

code is working very well, thank you!

1 Like