Make Header Transparent

TheCream
New Member
1 0 0

Hi.


My site URL: https://www.abcskin.life/


I've tried adding below code in theme.scss.liquid below "modules":

.template-index .site-header{
background-color: transparent;
position: absolute;
z-index: 1;
border-bottom: 0;
}

Unfortunately this leads to, as you can see, only the sides become transparent in the header menu.

How can I make the white background become transparent? Anyone have a clue? On YouTube many seem to have the same problem as me, but haven't been able to find a solution.

BR,

Alexander

0 Likes

You can try the following code, but it will most likely require some coding knowledge to make it look nicer.

 

#shopify-section-header{
    position: absolute;
    top: 0;

}

#shopify-section-header *{
    background: transparent;
}

.hero{
    margin-top: 0 !important;
}

 


Kind regards,
Diego

 

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes