Image header on product item page

Hey there

I wanted to ask for help on my product item page. Throughout the website I have background images behind the navigation and logo - but this doesn't carry through onto product detail pages in the shop.

Ideally it would be great to carry the header image from the store home page across onto all product detail pages.

If this isn't possible, how would I invert the navigation & logo colour to black and also add some padding in to the header to stop things overlapping as they are currently? This would be for product detail pages only. 

The CSS I'm using for the header image is as follows if it helps - works great everywhere on the site except product detail pages;

header.Header.Header--top {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
    background: transparent;
}

URL: moosecoffee.co

Thanks in advance for any help

Try this solution, add to Custom CSS:

.Main--products-item {
  .Header-branding-logo {
    filter: invert(1);
  }
}

Hi, thanks for your quick response

I have added in this code but unfortunately there is no change 

Hmm, try this instead:

.Main--products-item {
    .header-title-logo img {
    filter: invert(1);
  }
}

Hey Ziggy - thanks again for your help, I swapped out the code but unfortunately still no change!

Hey, i have found the following code which inverts the logo on product pages successfully;

.collection-type-products.view-item .Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(1);
  }

Is it possible to do the same (invert colours) with the Nav bar and increase the padding at the top?

Thank you 

So there is no way to add a header background image on a product detail page?  I'm trying to do the same thing and I started a new thread about it a couple days ago and got no response.  Pretty annoying problem.  I'm also trying to figure out how to add a background image to the header on the cart page and so far haven't found anything that works.

I used this code and I'm able to change the header and cart background color, but I wasn't able to modify it to use a background image (I also need background image 60% opacity):

/** Cart page header background **/
body#cart .header .header-announcement-bar-wrapper {
    background: #f0acd8 !important;
}

/** Product page header background **/
.collection-type-products.view-item.tweak-transparent-header .header .header-announcement-bar-wrapper {
    background: blue !important;
}

I also tried a bunch of different css code to add space between the header and the product image/description but none of it worked.  It's strange how the product page is different than every other page, it makes it frustrating trying to keep things uniform.

On 2/20/2023 at 6:39 AM, badcrc said:

So there is no way to add a header background image on a product detail page?  I'm trying to do the same thing and I started a new thread about it a couple days ago and got no response.  Pretty annoying problem.  I'm also trying to figure out how to add a background image to the header on the cart page and so far haven't found anything that works.

I used this code and I'm able to change the header and cart background color, but I wasn't able to modify it to use a background image (I also need background image 60% opacity):

/** Cart page header background **/
body#cart .header .header-announcement-bar-wrapper {
    background: #f0acd8 !important;
}

/** Product page header background **/
.collection-type-products.view-item.tweak-transparent-header .header .header-announcement-bar-wrapper {
    background: blue !important;
}

I also tried a bunch of different css code to add space between the header and the product image/description but none of it worked.  It's strange how the product page is different than every other page, it makes it frustrating trying to keep things uniform.

Use this code for background image

body#cart, body[class*="type-products"].view-item {
	header#header {
		background-image: url(https://cdn.pixabay.com/photo/2023/02/14/18/55/flowers-7790227_640.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
}
} 

On 2/25/2023 at 1:21 AM, tuanphan said:

Use this code for background image

body#cart, body[class*="type-products"].view-item {
	header#header {
		background-image: url(https://cdn.pixabay.com/photo/2023/02/14/18/55/flowers-7790227_640.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
}
} 

 

This code doesn't seem to do anything to the empty cart or full cart page.  My page is here: https://www.hcfreezedry.com/

On 3/1/2023 at 1:41 AM, badcrc said:

This code doesn't seem to do anything to the empty cart or full cart page.  My page is here: https://www.hcfreezedry.com/

I don't see code in CSS box. Where did you add?