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

Solved

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

zenir_official
Excursionist
18 0 2

Hi, I'm having a problem setting the background of the header. Currently the header is set to turn black on hover and scroll down when it is originally transparent.
This is fine so far, but when the SUMMARY of the detail is expanded and the mouse leaves the area, it loses the hover effect and becomes transparent again.
How can I ensure that the background of the header stays black even when the summery is visible?

 

zenir_official_0-1712820685455.png

 

 

Here's a link to the preview.
I'm using the dawn theme!

https://kp26oqao5mnfsz8j-86858006827.shopifypreview.com

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
8566 1690 1699

This is an accepted solution.

Hi @zenir_official 

You can try to add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code and check again

<style>
.header-wrapper:has(details[open]) { background: #000 !important; }
</style>

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

PageFly-Oliver
Shopify Partner
878 190 176

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

 

<style>
#shopify-section-sections--22410486317355__header sticky-header{
box-shadow: inset 50vw 0 50vw 0 #000000 !important;
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Dan-From-Ryviu
Shopify Partner
8566 1690 1699

This is an accepted solution.

Hi @zenir_official 

You can try to add this code to your theme.liquid file, after <head> in Online Store > Themes > Edit code and check again

<style>
.header-wrapper:has(details[open]) { background: #000 !important; }
</style>

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

zenir_official
Excursionist
18 0 2

code is working very well, thank you!

Dan-From-Ryviu
Shopify Partner
8566 1690 1699

Very welcome

- Helpful? Like and Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.