Hi Leopold! I'm back again 🙂 I've got the same problem above. My brine website now has standalone pages and I'm having problems displaying the transparent header in mobile view for these pages. The transparent header only works on the banners of stacked indexes. This is the code I used:
@media only screen and (max-width: 640px) {
.Mobile-bar--top {
background: hsla(0,0,0,0) !important;
position: relative;
z-index: 1 !important;
}
.Index-page--has-image:first-of-type {
margin-top: -100px !important;
position: relative;
z-index: 0 !important;
}
.sqs-block-content:first-of-type {
margin-top: 50px !important;
position: relative;
z-index: 0 !important;
}
}
And attached is the image I'm getting on standalone pages in mobile view. You can see that there is a white bar above the banner image and, what's more, because the logo is mostly white and the mobile nav icons are white, it just looks like a blank space.
I'd be so grateful for any advice about how to fix this. Thank you very much,
Sophie