Styling the header — controlling overlay, header position etc with CSS


This seems like a really good theme, but I am having some problems with initial attempts to customize the home page so that I can use it.

I am trying to make it so that the header image goes up to the very top, and the site logo and top menu are overlayed on the header image, which does not have an overlay.

I have tried using the following custom CSS but it behaves in a stange way:

.site-header { background-color: transparent !important; border-bottom: none; }

.header-image {
margin-top: -100px;

.header-overlay {
opacity: 0;

When ordered like that, the top rule doesn’t work — the header doesn’t become transparent. However, when I change the order of the above CSS so that the .header-image declaration is first then that declaration doesn’t work — the header image is not moved up by the 100px required px to make place it at the top of the page.
And when I put the .header-overlay first, that declaration doesn’t have any effect, while the other two work fine!

I don’t understand why the order of these declarations, is making the first one ineffective, as they control different classes…?

Test site where I’m trying to make this work:

Any advice gratefully received.

Hello there,

Your CSS code seems fine.

Where did you apply that code? Was that in Appearance > Editor > style.css? If possible, please provide the screenshot and post the whole CSS code to



I’ve just come back to this after working on other projects, and I now realise that there was a stray character above the CSS which was making the first declaration invalid.

Apologies for the needless enquiry, and thanks for the great theme!

No worries.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.