Solved

Change color of header on Collection page

BoneBox
Excursionist
20 1 3

Hi!

I would like to change color of header of our collection page from Pink to White. Any help would be appreciated! 

URL: https://bonebox.fi/collections/hannanheiluttavat-koiran-lelut
Screenshot: Attached

 

Screenshot 2023-10-05 at 18.13.17.png

Accepted Solution (1)
Asad24
Shopify Partner
180 35 31

This is an accepted solution.

yes, you can do that by adding the below code in your theme.liquid file before end body tag </body>


<script>

document.addEventListener("DOMContentLoaded", function()
{
 var targetUrl = "https://bonebox.fi/collections/hannanheiluttavat-koiran-lelut";
 if (window.location.href === targetUrl) {
var headerWrapper = document.querySelector(".header-wrapper");
if (headerWrapper) {
headerWrapper.style.background = "#ffffff";
}}
}
);

</script>

banned

View solution in original post

Replies 5 (5)

Asad24
Shopify Partner
180 35 31

Go to your online store > Customize > Settings > Custom css 
and paste this code in cutom css section

.header-wrapper {
   background: #ffffff;
}
banned
BoneBox
Excursionist
20 1 3

Hmm. Didn't seem to work 😕

Asad24
Shopify Partner
180 35 31

Try this 

.header-wrapper {
   background: #ffffff !important;
}

and if still not worked share collaborator access with me and i will fix it for you 
my email address is asadmahmood8470@gmail.com
banned
TessTess
Tourist
7 0 1

hi thanks for this answer, for me its currently changing the header color for every page. is there a way to have it only change the header color of a specific page?? thanks again for the help

 

Asad24
Shopify Partner
180 35 31

This is an accepted solution.

yes, you can do that by adding the below code in your theme.liquid file before end body tag </body>


<script>

document.addEventListener("DOMContentLoaded", function()
{
 var targetUrl = "https://bonebox.fi/collections/hannanheiluttavat-koiran-lelut";
 if (window.location.href === targetUrl) {
var headerWrapper = document.querySelector(".header-wrapper");
if (headerWrapper) {
headerWrapper.style.background = "#ffffff";
}}
}
);

</script>

banned