TRANSPARENT HEADLINE ON MOBILE

Store Design
, ,
1

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

mobile view
mobile view1290×2796 338 KB

pc view
pc view2876×1634 1.25 MB

2

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

3

Yess, i Just gave you access

4

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

5

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:

image_360.png
image_360.png283×360 139 KB

I hope this helps

Best,

Daisy