Solved

Transparent header on mobile using Debutify theme

Edw4l
Tourist
10 0 2

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!

Accepted Solutions (2)
Anthony_David_
Shopify Partner
417 46 105

This is an accepted solution.

@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

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States

View solution in original post

Anthony_David_
Shopify Partner
417 46 105

This is an accepted solution.

Yes it is possible

Mean while i will create a css for you.

Thanks

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States

View solution in original post

Replies 9 (9)

Anthony_David_
Shopify Partner
417 46 105

share store url

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States
Edw4l
Tourist
10 0 2
Anthony_David_
Shopify Partner
417 46 105

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

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States
Edw4l
Tourist
10 0 2

Hi @Anthony_David_ !

 

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! 🙂

 

 

 

 

when scrolling downwhen scrolling downat the topat the top

Anthony_David_
Shopify Partner
417 46 105

This is an accepted solution.

@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

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States
Edw4l
Tourist
10 0 2

@Anthony_David_  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)

 

 Is it possible to invert the logo to a white one and same with the menu and cart button?Is it possible to invert the logo to a white one and same with the menu and cart button?And is it possible to only have these changes apply to the homepage?And is it possible to only have these changes apply to the homepage?

Anthony_David_
Shopify Partner
417 46 105

This is an accepted solution.

Yes it is possible

Mean while i will create a css for you.

Thanks

Theme customization | Design | Shopify App Consultant
Have Any Questions? Whatsapp +1 (341) 241-4263
Based in United States
Leo001
Visitor
1 0 0

Any update on this ? 

baddiebratzz
Visitor
1 0 0

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