Debut Theme - Make the Header Transparent

yellaham
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
Qualitycheck
Shopify Expert
1403 114 222

Please Share a store url to better assist.

0 Likes
yellaham
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
Qualitycheck
Shopify Expert
1403 114 222

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
yellaham
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
fosetterlife
Tourist
4 0 4

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

katinkatenje
Tourist
4 0 2

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

katinkatenje
Tourist
4 0 2

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
zahid3d29
Shopify Partner
6 0 5

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
Anxiety_Hacker
Tourist
9 0 4

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