GushBottega Posted May 11, 2020 Share Posted May 11, 2020 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 Link to comment
derricksrandomviews Posted May 11, 2020 Share Posted May 11, 2020 (edited) 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; } Edited May 11, 2020 by derricksrandomviews Link to comment
GushBottega Posted May 11, 2020 Author Share Posted May 11, 2020 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? Link to comment
tuanphan Posted May 12, 2020 Share Posted May 12, 2020 Add to Home > Design > Custom CSS header#header:after { content: ""; background: white; display: block; height: 5px; width: 100%; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
derricksrandomviews Posted May 13, 2020 Share Posted May 13, 2020 (edited) 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. Edited May 13, 2020 by derricksrandomviews Link to comment
TimothyOD Posted March 18, 2021 Share Posted March 18, 2021 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! Link to comment
tuanphan Posted March 26, 2021 Share Posted March 26, 2021 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Kazukara Posted August 30, 2021 Share Posted August 30, 2021 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. Link to comment
monashee Posted September 22, 2021 Share Posted September 22, 2021 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. tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment