Shopify themes, liquid, logos, and UX
I'm trying to get the header transparent on mobile,
So I found threads on code to copy and paste into the theme CSS file,
however after toying around with it I got it perfect for the HOME page (removing the white bar etc) but once on the product page the logo is all messed up and mixed ontop of the announcement bar,
Unsure how to fix this.
Screenshot of Homepage where its normal transparent and turns white when scrolling: https://prnt.sc/1vnm62q
Screenshot of Product Page where its all messed up: https://prnt.sc/1vnmbuz
@uTech- can you please share this page link? I think header is not properly overlapping the other content , we need to set that
When going into mobile it only works on Homepage but go to a product and it gets messy
This is the exact code I put at the bottom of my theme.scss.liquid folder
@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: #FDF6EF !important;
}
}
@uTech- please remove this code part from above code
.header-section .header-container {
position: absolute !important;
}
I did it and its back to being solid
@uTechit is scrolling -
I wanted it to be transparent when its all the way at the top because in Home page I didn't like the way I have a slideshow but then theres a chunky white bar on top. But the problem was when I went to a product page it became messy. I want to be able to have a transparent header and it turning into a solid colour when scrolling while also working properly in product page.
@uTech- so do you want bar to be transparent on home page but not on other product pages to mess it up?
Basically, but it would be better if I could make it also transparent in product page.
Do you know a solution to this?
Try now as I disabled my Password
@uTech- please remove this part
.header-section .header-container {
position: absolute !important;
}
and add this css to check on product page
.is-scrolling .site-header {
background: rgba(255,255,255,0.7) !important;
}
the issue with your pages is all including home page sahre the very same css classes and hence any property applied will be reflected on ALL pages
Where do I put the second code? If it's okay with you can you put all the code together so I will just copy and paste it.
@uTech- put second code only, first is to be removed, you had added first one
Okay where do I put the second code at the bottom of the old one or at the top of them?
@uTech- please add at bottom
@media only screen and (max-width: 769px){
.site-header {
background-color: transparent !important;}
.is-scrolling .site-header {
background: #FDF6EF !important;
}
.is-scrolling .site-header {
background: rgba(255,255,255,0.7) !important;
}
}
this is what I have so far and something went wrong. It is solid when in top position but is slightly transparent when scrolling
Sorry for bothering you but what do I do now. Instead of being solid when scrolling it's slightly transparent
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024