The only transparent header on website is my landing page. I would like my header to be transparent for all pages of my website for DESTOP version only. Could anyone help me?
PW: CollectionThree
Topic summary
A user wants to make their website header transparent across all pages on desktop only, noting it currently works only on the landing page.
Initial Misunderstanding:
- Another user initially misunderstood, thinking the header was already transparent on desktop and solid on mobile as desired.
- They provided CSS code to modify mobile header colors via the theme’s base.css file.
Clarification:
- The original poster clarified with screenshots showing the header is transparent only on the homepage, but appears with a solid background on other pages (desktop version).
Proposed Solution:
- A PageFly representative suggested adding custom code to the theme.liquid file, placed above the
</head>tag. - Specific implementation steps were provided: navigate to Online Stores > Themes > Actions > Edit code > theme.liquid.
Status: The discussion remains open pending confirmation whether the proposed solution resolves the issue.
It appears to be how you’d like it already.
Desktop (transparent):
Mobile (white background):
To change header color on mobile only, find or add this code to your themes base.css file then change background color as needed:
@media screen and (max-width: 989px) {
.header--mobile-left {
grid-template-columns: auto 2fr 1fr;
background: red;
}
Result:
Hope that helps!
@biznazz101
Hello, thank you for the feedback, but the transparent header of the website is the main page only but when i go to other pages of my website its not transparent. Please see photos
1 Like
Hi @clayinfo
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
Hope this can help you solve the issue
Best regards,
Richard | PageFly