Hello! I’ve tried numerous codes to fix this but nothing seems to work.. I want my transparent header to go back to normal when scrolling down (sticky header) and I want it to be normal when opening a collection/product/page but it’s always transparent.
Topic summary
Goal: Convert a transparent sticky header to an opaque one on scroll, and keep headers normal (opaque) on collection/product/page views. Current issue: header remains transparent everywhere (site: kitchencrafted.shop).
Key suggestions:
- JavaScript toggle on scroll: initially suggested targeting .header-wrapper, then corrected to .header-wrapper–border-bottom. Set background to #2c332f when window.pageYOffset > 0; revert to transparent at top.
- CSS conflict: remove “!important” from base.css where .header-wrapper forces background: transparent !important; since this overrides script changes.
- Implementation location: multiple replies advise pasting the script in theme.liquid (before or at the file bottom). Attached images indicate exact placement, but the code blocks in those replies appear empty in the thread.
- Additional resource: a YouTube link provided for creating a transparent header (general guidance, not specific to the scroll-to-opaque behavior).
Status: After trying the advice, the requester reports it still doesn’t work. No confirmed fix or final resolution. Images showing where to insert code are central to applying the suggested solution; missing code snippets in some replies remain an open gap.
This is my site
Hi @kitchencrafted ,
You can try this code to make your sticky header non-transparent when scrolling down:
// Get the header element
const header = document.querySelector('.header-wrapper');
// Add a scroll event listener to the window
window.addEventListener('scroll', () => {
// Check if the user has scrolled down
if (window.pageYOffset > 0) {
// Set the background to none to make the header opaque
header.style.background = 'none !important';
} else {
// Set the background to transparent to make the header transparent
header.style.background = 'transparent';
}
});
Sorry after taking another look, the code should be updated:
const header = document.querySelector('.header-wrapper--border-bottom');
// Add a scroll event listener to the window
window.addEventListener('scroll', () => {
// Check if the user has scrolled down
console.log(window.pageYOffset, header)
if (window.pageYOffset > 0) {
// Set the background to none to make the header opaque
header.style.background = '#2c332f';
} else {
// Set the background to transparent to make the header transparent
header.style.background = 'transparent';
}
});
Also, you need to remove the !important code in the CSS file base.css in your theme in this line:
.header-wrapper{
background: transparent !important;
position: absolute;
width: 100%;
}
Thank you for your answer, but for some reason it still doesn’t work…
Hello @kitchencrafted ,
You can follow these steps:
- Go to Online Store->Theme->Edit code
- Open your theme.liquid file, paste the below code before
I hope the above is useful to you.
Kind & Best regards,
GemPages Support Team
Hi [email removed]Kitchencrafted,
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 bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Victor | PageFly
1 Like
You can add transparent header by following this:
