Debut Theme - Make the Header Transparent

Highlighted
New Member
5 0 0

Hello, 

    I'm using the debut theme for my store. Right now the header is white, we wanted to make it transparent and for the color to only fill when scrolling. 

     Which liquid file would I have to adjust and what would be the code? Thank you 


0 Likes
Highlighted
Shopify Expert
1381 112 211

Please Share a store url to better assist.

0 Likes
Highlighted
New Member
5 0 0

smartlifeco.myshopify.com
password: cliffa

I wanted the white top part to be transparent, kind of like the Brooklyn theme.

0 Likes
Highlighted
Shopify Expert
1381 112 211

Hello, 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file
.site-header {
position: fixed;
background-color: transparent;
}

0 Likes
Highlighted
New Member
5 0 0

I've done that and it makes the header transparent, however you can't see the menu items the image blocks the text

0 Likes
Highlighted
Tourist
4 0 3

Hello, 

May a Shopify expert please help us, as many others including myself want the exact same thing.

Unfortunately, Qualitycheck's answer does not work.

 

Thanks!

fosetterlife.com

Highlighted
New Member
4 0 0

Hi, I tried this code as well and it puts the whole header behind all other elements on the page. It also makes it fixed, where I'd love it to be transparent, stay on top of page and disappear when scrolling down. 

Url: https://asecondloveaffair.com

Password: pleilt

0 Likes
Highlighted
New Member
4 0 0

Hi again :)

I found this solution that made me happy!

This makes the header overlap the top image and it becomes transparent if you select the background color to none. 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste bellow code in the bottom of the file 

.site-header {
    position: absolute;
    background-color: transparent;
}



https://community.shopify.com/c/Shopify-Design/Debut-Theme-How-to-make-navigation-bar-overlap-image/...

0 Likes
Highlighted
Shopify Partner
6 0 4

you can use this below code. z-index is important here. It will take nav bar infront of BG.

 

header.site-header {
    z-index: 1;
    position: fixed;
    background: #00ffff00;
    margin: 0;
    padding: 0px 0px 0px 0px;
}

 

0 Likes
Highlighted
Tourist
9 0 4

This code worked great but, How do I make the color fill in white when the page starts to scroll?