Transparent header - product page

Nato0201
Excursionist
49 0 4

Hey team,

 

Wanting to make header transparent on every product page for mobile and desktop. Home page is currently transparent but product pages are not.

 

Any help would be appreciated!

 

https://ap-perform.com/

Replies 3 (3)

BSSTech-Venture
Shopify Expert
495 130 152

Hi @Nato0201 ,

 

Please follow these steps:

 

1. Please navigate to Online store => Themes => Edit code

 

BssTechVenture_0-1715330200704.png

 

 

2. Search for the file "base.css" 

3. Add this code at the end of the file and save

@media screen and (min-width: 1025px) {
    .header-nav-hamburger:not(.header-hamburger--transparent) {
       background: transparent!important;
    }

}

 

This is the result

 

view (4).png

 

Hope this will helps

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Nato0201
Excursionist
49 0 4

Hey! Hasn't seemed to work. Is it meant for base.css?

Nato0201
Excursionist
49 0 4

Apologies! the header it self is transparent which is great! but It's still it's own block so I can't have a photo go behind it when the page loads if that makes sense (see attached)Screen Shot 2024-05-12 at 2.33.34 PM.pngScreen Shot 2024-05-12 at 2.33.25 PM.png