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!

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)
}

That's an interesting suggestion. I'll run it by the client. I suspect that she'll want something that clearly and accurately represents the sculpture, so it may not be a workable solution...

In case she want something else reply to this post

Great.

You can reduce the space with the below code

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

Or this, correct?

[data-section-id="abcxyz"] { min-height: unset !important; height: 50px !important; }

Yes, similar to your code

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