Header covering the top of Background of First Section 7.1

If you make your header transparent, part of the background from the first section appears below it. If you turn off transparency that part of the backgrounds gets hidden underneath the header. It's even explained in the support docs that this is the default behavior.

Is there a way to prevent this from happening and have the first section actually start below the header? I feel like if it's not transparent it should start below it.

I did this for now... it feels really dirty. 🤣

#sections:first-child .section-background {
  margin-top:60px;
}

Hey @ChrisBartow thank you for posting this. It worked, but it's adding a margin to all of my sections, not just the first one. Did you have that problem? Any ideas?

13 hours ago, EmilyJoannWilkins said:

Hey @ChrisBartow thank you for posting this. It worked, but it's adding a margin to all of my sections, not just the first one. Did you have that problem? Any ideas?

What is your site url? We can help easier

Hello @tuanphan, I have the same problem. 

I tried this:

#sections:first-child .section-background {
  margin-top:60px;
}

It worked, but it's adding a margin to all of my sections, not just the first one. How can I change this to just one section?

On 12/14/2022 at 12:00 AM, floren_dina said:

Hello @tuanphan, I have the same problem. 

I tried this:

#sections:first-child .section-background {
  margin-top:60px;
}

It worked, but it's adding a margin to all of my sections, not just the first one. How can I change this to just one section?

You missing # symbol. Try this

article sections:first-child .section-background {
  margin-top:60px;
}

I got a pretty good workaround for this problem from Squarespace's customer support.

Rather than using a background image, you can add an image block to the first section, drag its left and right sides to the edges of the page, and set a custom section height of 1 pixel. That essentially re-creates the background image, but the focus point will be calculated correctly.

I tried this one and got the same duplicating margin:

#sections:first-child .section-background {
  margin-top:60px;
}

I tried this one and it does nothing for me: 

article sections:first-child .section-background {
  margin-top:60px;
}

Any ideas?

soulfirejournalco.com

1 hour ago, Jordy12 said:

I tried this one and got the same duplicating margin:

#sections:first-child .section-background {
  margin-top:60px;
}

I tried this one and it does nothing for me: 

article sections:first-child .section-background {
  margin-top:60px;
}

 

Any ideas?

soulfirejournalco.com

Which page are you referring to? It looks fine on homepage.