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

 

◦ Product page slider & thumbnails with swiping for free themes: Minimal | Debut | Brooklyn | Supply
◦ Replace apps with simple copy/paste code snippets. Examples clicking here.
0 Likes