Make Header Transparent On Product Page Only On Mobile

Store Design
, , , , , ,
1

Hello!

I want to make the header transparent on the product page only on mobile. The theme I am using (Stiletto) only allows me to apply it both to mobile and desktop versions.

My website is www.winnerofficial.com

I tried many codes but nothing works!

2

Hi @martujv ,

You can follow these steps::

Step 1: Go to Online Store > Theme > Edit code > find theme.liquid fileand edit tag

Step 2: Insert code below at the end theme.css file

@media (max-width: 749px) {
  .product-page .header {
    background-color: rgba(255, 255, 255, 0); !important;
  }
}
3

Hi

Didn’t work

4

Hello @martujv ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your theme.css file and paste the following code at the bottom:

@media screen and (max-width: 749px) {
.template-product header {
    background-color: rgba(255, 255, 255, 0) !important; 
    position: absolute; 
}
}

Thanks

5

Hey! It made the header transparent only on mobile but it also made all the icons and the logo be aligned in a weird way on the left of the header (on mobile), is there any way to not change the distribution of the header icons? Thanks