Re: 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
22 0 4

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
10030 1999 2043

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! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 4 (4)

PageFly-Oliver
Shopify Partner
878 190 182

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
10030 1999 2043

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! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

zenir_official
Excursionist
22 0 4

code is working very well, thank you!

Dan-From-Ryviu
Shopify Partner
10030 1999 2043

Very welcome

- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.