Transparent header - product page

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!

Replies 3 (3)

Shopify Expert
495 130 152

Hi @Nato0201 ,


Please follow these steps:


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





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

49 0 4

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

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