TRANSPARENT HEADLINE ON MOBILE

[AA226]

Hey there, 

I hope y'all will be able to help me, 

I have a theme which allows me to enable a transparent headline on computer version of my website, however it won't let me in the setting make it the same way for the mobile, which lead to a point where the mobile view is way more good looking than the computer. 

When most of the people will see the website on their phone, is there a way or a code to make the header transparent on the main page only, like the main page on the computer view ? 

I would be forever grateful if y'all are able to help me with this case ? 

Thank you in advance, 

AA

[AA226]

Hey there, 

Thanks for answer but I don't really get the part I need to target the homepage and mobile view, if you could help me further it would be really nice please ? Here's my collaboration code : 9305. 

Thanks

[AA226]

Yess, i Just gave you access

[AA226]

Thank you so much ! like really, please let me know when they'll be able to create the code please 🙂 Thanks so much again

[DaisyVo]

Hi @AA226 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (max-width: 768px){
div.shopify-section-group-header-group.section-header .site-header.index-header {
    background: transparent !important;
}
div.shopify-section-group-header-group.section-header .site-header.index-header.active {
    background: white !important;
}
body:has(.site-header.index-header) .page-container.page-element {margin-top: -70px;}
}

Here is the result:  

I hope this helps

Best,

Daisy