Transparent header on mobile using Debutify theme

Solved
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)

Accepted Solutions
Anthony_David_
Trailblazer
229 29 89

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

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05

View solution in original post

Anthony_David_
Trailblazer
229 29 89

This is an accepted solution.

Yes it is possible

Mean while i will create a css for you.

Thanks

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05

View solution in original post

Replies 9 (9)
Anthony_David_
Trailblazer
229 29 89

share store url

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
Anthony_David_
Trailblazer
229 29 89

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

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05
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_
Trailblazer
229 29 89

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

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05

View solution in original post

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_
Trailblazer
229 29 89

This is an accepted solution.

Yes it is possible

Mean while i will create a css for you.

Thanks

Shopify Expert - Theme customization | Design | Marketing | Product Sales
Hire Me: anthonyuidesigner@gmail.com
Whatsapp ( Click on number )- +33 6 28 93 62 05

View solution in original post

Leo001
New Member
1 0 0

Any update on this ? 

baddiebratzz
New Member
1 0 0

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