How can I make the header transparent in Debut theme?

Store Design
21

@RSS

great thanks for detail please add this code

#shopify-section-header {width: 100%;}
.site-header {border: none !important;}
22

Thank you for the Ketan, It didn’t work unfortunately :disappointed_face:

It made no changes on desktop, It made some changes on mobile only but there was still a white background behind the header with a line underneath.

23

@RSS

do you have like this?

KetanKumar_0-1624540525347.png
KetanKumar_0-1624540525347.png1920×1080 400 KB

24

Hi Ketan, It doesn’t look like that here on my end. Just to confirm are these the code I use.

I am pasting it in Asset->/theme.css because I don’t have theme.scss.liquid.

This is the code I am using.

.template-index .site-header {background-color: transparent; position: absolute;}
.template-index .site-header__mobile-nav {background-color: transparent;}

#shopify-section-header {width: 100%;}
.site-header {border: none !important;}

25

@RSS

can you please add this script

https://codepen.io/codeandfly/pen/xbQVOR

26

Hey, Thanks for that. Quite unsure where they are going, can you give me directions where exactly I’m adding the script, please.

27

@RSS

yes i have sent message please check

28

Hi there. I’m wondering if you can help with my problem too?

I can’t seem to make my logo appear transparent in the header in Debut theme…

I followed suggestions offered in other questions but it hasn’t helped. I don’t have theme.scss.liquid so I was pasting code into theme.css. That didn’t work so I created theme.scss.liquid. That also didn’t work.

Any suggestions would be helpful!

https://sonosnaps.myshopify.com/

Pass: crewdo

29

@sammy90

do you mean like this?

KetanKumar_0-1626497421677.png
KetanKumar_0-1626497421677.png1920×1080 338 KB

30

Hi

I would like to make the header a little bit more transparent when I scroll down… it still should be white but transparency should be like 50%. Could someone help me?

31

Hello. I made the header transparent with that code and also made it sticky with these steps but the logo, shopping cart icon, and search icon have disappeared in desktop view. On mobile, it isn’t working at all. It doesn’t show any content in the header on mobile.

Thanks please flow this step

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.js.liquid->paste below code at the bottom of the file.
$(window).scroll(function() {
if ($(this).scrollTop() > 35){  
    $('.site-header').addClass("sticky");
  }
  else{
    $('.site-header').removeClass("sticky");
  }
});

Step = 2

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.site-header.sticky {
   position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
}
32

it doens’t work the other pages are now hiding under the transparent header!!!

33

i think you let us make faults so we will ask your help. Not good

34

@Miopatron

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

35

www.miomilly.com password araiga

36

www.miomilly.com password araiga

37

@Miopatron

thanks for url

try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.site-header, .site-header__mobile-nav {
background-color: transparent;
    border: none;
}
38

I need also the text go white when its transparent and it must turn to
normal when you scroll down

39

@Miopatron

https://codepen.io/JGallardo/pen/lJoyk

40

please look what it did to my website, are you even serious bro