Header on mobile transparent while scrolling, but shouldn't.

[Bodyguard55]

Hi y'all

I have a question about our header.

The header turns from transparent to white while scroling as it should be, however on a mobile device it doesnt turn white at all - it stays transparent (but on the mobile preview on the desktop it shows is as it should be).

Can someone help me? the shop is www.bodyguard-shop.ch

Thanks in advance!

kind regards 
Erik

[AnneLuo]

It's because this style is not supported on mobile devices.

You can modify the background color on the mobile device separately.

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Customize.

Step 2: Find the header section on the home page, and add this code below to the custom css box. Like this:

@media (max-width: 768px) {
   .header-wrapper {
      background: #cccccc !important;
   }
}

The effect after modification:

If you will unable to implement the same then I'm happy to do this for you, let me know.
I can implement the code changes so that this will work well for you.
Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[Bodyguard55]

Hi AnneLuo 

Thanks for your response. 

However thisone doesnt work for us bc the header on the mobile device is now completely grey and not semi transparent like yours...

[Vinsinfo]

@Bodyguard55 Please follow below steps to remove the white background on the header. Let me know whether it is helpful for you.

1. From admin, go to "Online Store" -> "Themes".

2. Click "Customize" button from the current theme.

3. Click header section and paste below code in the "Custom CSS" field.

@media screen and (max-width: 769px) {
    .header-wrapper {
        background: inherit !important;
    }
    .section-header.shopify-section-group-header-group.scrolled-past-header sticky-header.header-wrapper {
        background: #FFFFFF !important;
    }
    .header__icon {
        color: #000000 !important;
    }
}

4. Now, your header will be displayed like in the below screenshots:

Before scrolling on mobile:

While scrolling on mobile:

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

[Bodyguard55]

 I can't upload it, there seems to be an error in the following part:

.section-header.shopify-section-group-header-group.scrolled-past-header sticky-header.header-wrapper { background: #FFFFFF !important; }

[Vinsinfo]

@Bodyguard55 It shows because the element we have used is not found before scrolling the page in customize mode. The element will be available only after scrolling the page. But, you can able to save the code and view the changes in store frontend. Please save the code and let me know if you are still facing the issue.

[Bodyguard55]

I can't save the code it doesnt allow me...