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

zenir_official · ‎04-11-2024

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?

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

https://kp26oqao5mnfsz8j-86858006827.shopifypreview.com

Dan-From-Ryviu · ‎04-11-2024

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 Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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

PageFly-Oliver · ‎04-11-2024

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 · ‎04-11-2024

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 Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- 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 · ‎04-11-2024

code is working very well, thank you!

Dan-From-Ryviu · ‎04-11-2024

Very welcome

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

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

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

Community Blog Articles