Adding White Space Between Header and Banner Image

Site URL: https://parsnip-recorder-2g46.squarespace.com

I am using the 7.1 version of squarespace and am having an awful time trying to figure out how to add white space between my header block and banner image. I do not want these two elements running together. I tried adding a blank space, but that is way too thick for what I want to do with my design. Any advice here would be greatly appreciated! parsnip-recorder-2g46.squarespace.com

Use this in custom css and you can add a space in a header and make it much "thinner". 

.spacer-block {
     padding-top: 0;
     padding-bottom: 0 !important;
 }

 .spacer-block .sqs-block-content {
      line-height: 0.0em;
 }
 .sqs-layout.sqs-editing .spacer-block {
     min-height: 0;
 }

Hey Derrik, I appreciate your response, but nothing happened when I added this code to the custom css section. Am I supposed to add a number or color at any point here?

Add to Home > Design > Custom CSS

header#header:after {
    content: "";
    background: white;
    display: block;
    height: 5px;
    width: 100%;
}

Sorry I didn't read it correctly, you want white space between banner and header not just blank space. Tauphan's code is the way to take care of that. Hang on to my code for making spacer bars thinner though, its a great tool. I use it a lot. 

Came across this post as I was having same problem; Tuanphan's code doesn't seem to add any whitespace below my header, EXCEPT that it is suddenly visible when I "edit header"; and then it is across the center of the header. Mysterious!

On 3/18/2021 at 11:41 PM, TimothyOD said:

Came across this post as I was having same problem; Tuanphan's code doesn't seem to add any whitespace below my header, EXCEPT that it is suddenly visible when I "edit header"; and then it is across the center of the header. Mysterious!

Did you add to Code Injection/Page Header?

Running across this problem as well. Adding either tuanphan or derricksrandomviews code to either Design -> Custom CSS or Code Injection/Page Header doesn't seem change anything. Even if I add space blocks after adding derricksrandomviews's code, the height of the space block doesn't change. 

Hi, I'm pretty sure I know what you are trying to do and you don't need css. You just go to "edit site header, then select "colors" in the universal settings, then unclick where it says "transparent". This will stop the header image from bleeding into the menu. Hope that helps.