[Resolved] How to get the page-header element to appear half way up the logo/nav

[unoaime]

I’m using the “Service” theme. On the homepage i was able to do it by using the spacing feature and doing “margin-top: 100px”. On the other pages though it seems a lot more complicated to get the correct styling due to the page-header element.

I could probably create an individual hero for each page but it would become tedious doing it for every new one so would somehow like it to work in the element.

I fiddled around earlier and managed to get it placed right but it would appear on top of the logo and navigation, obscuring them.

Any ideas?

[unoaime]

I’ve just edited to include the website url. What I have on the homepage I’d like to be consistent throughout but having some real trouble getting the page header element to behave how i’d like.

[David]

Hi there,

your site is behind a coming soon page – can you share a login so we can take a look?

[unoaime]

Oh whoops! Details added. Thanks.

[Tom]

Hi there,

How exactly would this work with the existing Page Hero heading/text? Do you have a quick mockup of the look you’re going for?

[unoaime]

Right now the global page header is merged with the header/nav, but i would like it to start around half way down, so just above the “TRAINING” word. This is so it remains consistant with the styling on the front page.

Is this a better desciption?

If not i’ll go ahead and try to make a mockup. Thanks for the reply.

[David]

Try adding this CSS:

body:not(.home) .header-wrap {
    top: 30px;
}

body:not(.home) .page-hero {
    margin-top: 100px;
}

[unoaime]

Fantastic! It all seems so simple when you know how! I was not aware of not(.home). I’ll be remembering this and definitely using it on future sites.

Thank you so much, and Merry Christmas!

[unoaime]

–

[David]

You’re welcome.

:not is a CSS pseudo selector. It simply allows you to exclude elements that have a specific class.

More info here:

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

[Author]

Posts