Transparent mobile header goes wrong when page is in a folder, Brine

Hi there, 

I've used the code below to set up a transparent mobile header for my site which uses the Brine template.  The mobile nav header now sits nicely over each index page banner image: 

@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;
}
}

However, this code only works for index pages and I've come to a problem when my pages sit under a folder. The mobile banner for these pages is located below the nav header so that the mobile header is now white and illegible because the logo and nav icons are white too (please see image).  Is there any way to fix this, other than adding a background colour to the mobile bar of these particular pages?  I'd really like to have the banner image sit behind the mobile nav menu, as it does with the index pages.

Any advice would be greatly appreciated!

Thanks very much 🙂

Hi,
Please share your website URL.

Best,
Leopold

Thanks very much Leopold for offering to take a look - the site is still very much in draft.  I'll send you the details.

You're welcome. Feel free to ask me when you are ready!

Best,
Leopold

Hi Leopold, On further reflection, I'm not sure that I can actually share the URL at this stage as the site content is somewhat confidential until it is finalised by the client and goes 'live'.  If I still have the issue by that point, is it OK for me to get back in touch with you then to share the URL?

Best, 

Sophie

It's Ok. No problem. You can also contact me via Skype: LeopoldJobs to get quick respond.

Best,
Leopold

Thanks Leopold!  I managed to solve this with a very simple fix - I don't know why I didn't think of it earlier!  All I had to do was create the pages as sections under an index in the unlinked section, and then add them as links under the folder for my drop down menus.  So now the page structure and formatting is uniform throughout the site 🙂 

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

Hi Sophie,
Please share your website URL.

Best,
Leopold

Ah!  I just figured it out!  Just needed some CSS tweaks.  I spent all yesterday trying to work it out to no avail but finally came up with a solution just after I posted my request.  Thanks so much for your offer of help though 🙂🙏

Great! Glad you solved it dear Sophie!

Good luck!

On 10/22/2020 at 4:47 AM, sophiekaz said:

Ah!  I just figured it out!  Just needed some CSS tweaks.  I spent all yesterday trying to work it out to no avail but finally came up with a solution just after I posted my request.  Thanks so much for your offer of help though 🙂🙏

How did you solve this @sophiekaz? I'm having a hard time getting rid of the white bar.

6 hours ago, Kico said:

How did you solve this @sophiekaz? I'm having a hard time getting rid of the white bar.

Hi,
Please share your website URL.

Best,
Leopold

11 hours ago, IXStudio said:

Hi,
Please share your website URL.

Best,
Leopold

https://faithstrongsite.squarespace.com/ pw:faithstrong

On 1/30/2021 at 10:13 AM, Kico said:

https://faithstrongsite.squarespace.com/ pw:faithstrong

Do you still need help on this?

On 2/3/2021 at 2:45 AM, tuanphan said:

Do you still need help on this?

On 1/30/2021 at 12:32 AM, IXStudio said:

Hi,
Please share your website URL.

Best,
Leopold

In need of some help on this one! I've been working on this for days and have tried a million codes and can't seem to figure out why I get no results.

www.southernsunevents.com

PW: sse2020

On 3/11/2021 at 11:24 PM, SouthernSunEvents said:

 

 

In need of some help on this one! I've been working on this for days and have tried a million codes and can't seem to figure out why I get no results.

www.southernsunevents.com

PW: sse2020

Hi. It looks fine here. Did you solve problem?

I see huge space on mobile. Do you want to reduce it?