Jump to content

How to increase padding above logo and menu without altering the background image

Go to solution Solved by scott_morris,

Recommended Posts

Hi all,

A client would like to have a background image that bleeds into the header space. The way it is currently set up, the logo and menu are hard to read against that background. See below:


I'd like to push the logo and menu downward so that they float in the empty grey space below all that patterning. I've tried to use both of the following CSS code to accomplish this:

div.header-announcement-bar-wrapper {
    padding-top: 350px !important;

.header-announcement-bar-wrapper {
    padding-top: 350px !important;

Both of these do push down the logo and menu, but they also change/enlarge the size of background at the same time. See below:



This of course, doesn't really solve the problem. I'd like to keep the background sized the same, but simply lower the Logo and header. Any suggestions?

The url for the website is: https://fife-crocodile-dfg8.squarespace.com/

Thanks so much in advance!

Edited by scott_morris
Adding url to website.
Link to comment

What do you think about inverting the colors with CSS?
In case you want this, add the below code in Custom CSS.

#header:not(.light) {
    filter : invert();

#sections > :first-child .section-background .section-background-overlay {
    opacity : 1!important;
    background : rgba(0, 0, 0, .5)


Screenshot 2024-01-21 at 21.07.14.png

Screenshot 2024-01-21 at 21.07.25.png

Link to comment

In case she want something else reply to this post

Link to comment
  • Solution

@sorca_marianA solution popped in my head and it seems to work. I needed to upload a background image that was slightly more zoomed out than the original and then let the above code I mentioned earlier do the "cropping" for me.


The only thing I'd like tweak at this point is to reduce the amount of space in the block just below the header. Any ideas on that?

Edited by scott_morris
Link to comment


You can reduce the space with the below code

#sections > :nth-child(2) .content-wrapper {
    padding-top : 0!important


Screenshot 2024-01-21 at 22.44.49.png

Link to comment

Yes, similar to your code

#sections > :nth-child(2) {
   min-height: unset;


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • 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.