Jump to content

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

Recommended Posts

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 🙂

20200827_201745.jpg

Link to comment
  • Replies 16
  • Views 773
  • Created
  • Last Reply

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

Link to comment

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 🙂 

Link to comment
  • 1 month later...

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

problem mobile nav.jpg

Link to comment
  • 3 months later...
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.

Link to comment
  • 1 month later...
  • 2 weeks later...
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?

image.thumb.png.1fbf8c106e189a265f2edf4a2a884bf2.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.