Hello there!
I need help adjusting my header design.
On the homepage - The header is having transparent background with a white colour logo at the moment. I want it change to a white background when user scrolling down the page, meanwhile the logo color should also be changed to purple.
The other pages, the header background remains white with a purple color logo.
I think this should be adjusted on both desktop and mobile 
Is this possible to do?
Thank you very much for your help!
Theme: Sense
Hey @lottiediao ,
Yes, it’s possible to achieve this functionality using CSS and JavaScript. Below are the steps you can follow to implement the desired behavior:
Steps to Adjust Header Design:
Locate the header section in your theme files. This could be in header.liquid, theme.liquid, or similar, depending on the theme’s structure.
Add a class or ID to the header container to make it easily targetable (e.g., ).
Define styles for the header in its default state and scrolled state.
You can use a CSS transition to ensure a smooth background and logo color change.
/* Default Header Styles */
#main-header {
background: transparent;
transition: background-color 0.3s ease, color 0.3s ease;
}
#main-header.scrolled {
background: white;
}
/* Logo Color */
.logo {
color: white;
transition: color 0.3s ease;
}
#main-header.scrolled .logo {
color: purple;
}
/* Other Pages (Ensure the header always stays white) */
body:not(.homepage) #main-header {
background: white;
}
body:not(.homepage) .logo {
color: purple;
}
document.addEventListener("DOMContentLoaded", function () {
const header = document.getElementById("main-header");
if (header && document.body.classList.contains("homepage")) {
window.addEventListener("scroll", function () {
if (window.scrollY > 50) {
header.classList.add("scrolled");
} else {
header.classList.remove("scrolled");
}
});
}
});
Test the behavior on both desktop and mobile devices to confirm it works correctly.
Use media queries in CSS if adjustments are required for mobile.
Save your changes and test them on your site
Let me know if you need help with implementation or further clarification! 
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat Sharma
Hi Rajat thanks for your solution!
I only managed to find the hearder.liquid under Section in the theme’s structure.
Then I can’t follow the rest of the steps you provided sorry
Hi @lottiediao
Please change sticky header option to always from your Online Store > Themes > Customize > Header so I can give you the code
Hi @Dan-From-Ryviu sorry about that, i’ve changed it now!
Please add this code to theme.liquid file after change your settings
{% if template == 'index' %}
{% endif %}
Hi @Dan-From-Ryviu i’ve set the header always stick at the top but the codes didn’t work
I think there’re some parts of my codes are not working? because the site didn’t have the sticky header on the top no matter I set it as “always” or “always, reduce the logo size”.
If you don’t mind, can I send collab request access to your theme so I can check and help you?
yes
I need your store’s collaborator request code
it’s 3545
Request sent!
Could you remove thisJS code
https://yinheart.com/cdn/shop/t/14/compiled_assets/scripts.js?864
I cannot find where to remove it
give me a sec, let me see how to remove it
i think it’s in header.liquid, can you check if i am right?
No, I cannot find it in files, that why im asking you to remove
hi @Dan-From-Ryviu sorry i didn’t find it neither
Give me apps, files permissions so I can check
ok, please refresh