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

Bodyguard55
New Member
7 0 0

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

Replies 6 (6)

AnneLuo
Shopify Partner
434 88 87

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

AnneLuo_0-1710578663443.png

 

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;
   }
}

 

 

AnneLuo_1-1710579353014.png

 

The effect after modification:

 

AnneLuo_2-1710579472061.png

 

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!

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   Buy Me A Coffee
Bodyguard55
New Member
7 0 0

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
Shopify Partner
257 94 85
@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:
Vinsinfo_0-1710852244240.png
 
While scrolling on mobile:
Vinsinfo_1-1710852251996.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Bodyguard55
New Member
7 0 0

Bodyguard55_0-1710956693347.png

 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
Shopify Partner
257 94 85

@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
New Member
7 0 0

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