Change color on header background

[MLBildeler]

I have the header as transparent on the homepage and #333333 on all the other pages. I want to keep the transparent on the homepage but change the header everywhere from #333333 to #000000. How can I do that?

[Moeed · Accepted solution]

Hey @MLBildeler 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template.name != "index" %} 
<style>
.header-wrapper.color-scheme-3.gradient {
    background: #000000 !important;
}
</style>
{% endif %}

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[MLBildeler]

Thank you so much 🙂

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[wikoyat]

To achieve this, you can modify the header styling in your Shopify theme’s CSS. You’ll want to add a conditional statement that applies a different background color depending on whether the page is the homepage or not. Here’s how you can do it:

Go to Online Store > Themes > Actions > Edit Code.

Open the theme.css or styles.css file (depending on your theme).
Look for the section where the header styles are defined.

Add the following code:

/* For homepage header (transparent) */
.template-index .site-header {
background-color: transparent !important;
}

/* For all other pages (#000000) */
.site-header {
background-color: #000000 !important;
}

This will ensure that the homepage header stays transparent, and all other pages will have the #000000 background color. If you're not familiar with making these changes, I’d be happy to assist further and guide you through the process! Let me know if you need help implementing this or have any questions.

wikoyatabdulrasheed@gmail.com