Hello,
I am looking for help to make the header on my website SEMI Transparent, important thing here is SEMI. I would like to run either white or black at low opacity.
thank you in advance! Michael
Topic summary
A user seeks help making the header semi-transparent on their Shopify Venue theme store (sipstruck.com).
Solution Provided:
- Add CSS code to
component-header-transparent.cssfile - Use
#00000070for semi-transparent black - Use
#ffffff24for semi-transparent white - Adjust opacity using browser DevTools (F12) by inspecting the header and modifying the color slider
Implementation:
The code targets the transparent header component and applies background color with opacity values. The helper provided visual examples showing both dark and light semi-transparent effects.
Current Status:
Initial request resolved successfully. User has submitted a follow-up request to make header menu text black on all pages except the homepage (which should remain white). This new customization remains unanswered.
Hi @M_fenwick , can you share your store url with us?
Hello,
certainly, the address is sipstruck.com there is a password currently on it “thifli”
best, Michael
Oh, exactly! Yes.
Ok @M_fenwick , you can follow these steps:
Step 1: Open Online Store → Themes → Edit code.
Step 2: Find component-header-transparent.css file
Step 3: Paste this code at the bottom of the file
body:not(.header-stuck):not([header-menu-open]) [data-transparent-header=true].header:not(:hover) {
background-color: #00000070 !important;
}
If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you 
1 Like
this is great work! Many thanks!
how would I adjust lighter or darker, and what values if I wanted semi transparent white?
best, Michael
You can use this value for semi transparent white: #ffffff24. It’ll look like this:
If you want to adjust lighter or darker, you can open browser devtools (F12) → Inspect your header, then you can change this slider with your taste, then paste the code in component-header-transparent.css. (#ffffff for light, and #000000 for dark). Thanks
1 Like
Amazing, thank you again for your help! How would I contact you directly for any future work?
best, Michael
If you need help, you can send us a private message. Thanks you
Hello,
Another one for you, I’d like to make the header menu/text on all pages except the home page black. Home page white menu/text as is.