Transparent header on mobile using Debutify theme

[Edw4l]

Hello,

I am currently building my store and i want my header to be transparent at the top of the homepage. I am currently using debutify and the theme have a option to have a transparent header that changes when you scroll down. The problem is that the transparent header only works on desktop and not on mobile.

I have tried to edit the themes code but to no success, does anyone know if it is possible to accomplish?

Have a great day!

[Anthony_David_1]

share store url

[Edw4l]

url: https://sneakerstvatten.myshopify.com/

password: whauly

[Anthony_David_1]

Hello @Edw4l

Can you please confirm, if you want to make transparent only for mobile or do you want to make it transparent when scroll?

Thanks

[Edw4l]

Hi @Anthony_David_1 !

I want the mobile header to have the same functionality as the desktop header. So i want it be transparent on the top of the homepage but turn white when you scroll down. I will attach some pictures to show what im looking for.

Thank you for your engagment!

[Anthony_David_1]

@Edw4l

Add the css on your theme.scss.css at the bottom

@media only screen and (max-width: 769px){
.header-section .header-container {
    position: absolute !important;
}
.site-header {
    background-color: transparent !important;}
.is-scrolling .site-header {
    background: #fff !important;
}
}

Hope this helps

Thanks

[Edw4l]

@Anthony_David_1 Thank you so much, I have tried to fix this for so long so i really appreaciate your help! Can i just ask two more things if you have time ofcorse, is it possible to just have the transparent header apply for the homepage? Also is it possible to make the colors of the cart, logo and menu white when transparent? (So it works with the background)

[Anthony_David_1]

Yes it is possible

Mean while i will create a css for you.

Thanks

[Leo001]

Any update on this ?

[baddiebratzz]

Hi,i need the same but it doesn’t work for me

[Grecia_1]

Hi, I just copy this code and it worked fine for my homepage but then when I navigate through my page, the header and the info of my

collections are very close to each other as well as the name of the collection, name of the product, cart…