Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
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
This is an accepted solution.
Yes it is possible
Mean while i will create a css for you.
Thanks
share store url
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
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! 🙂
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
@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)
This is an accepted solution.
Yes it is possible
Mean while i will create a css for you.
Thanks
Any update on this ?
Hi,i need the same but it doesn't work for me
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024