Archived topic
How to get the page-header element to appear half way up the logo/nav
9 replies · Started by unoaime on December 22, 2020
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?
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.
Hi there,
your site is behind a coming soon page - can you share a login so we can take a look?
Oh whoops! Details added. Thanks.
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?
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.
Try adding this CSS:
body:not(.home) .header-wrap {
top: 30px;
}
body:not(.home) .page-hero {
margin-top: 100px;
}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!
-
You're welcome.
:not is a CSS pseudo selector. It simply allows you to exclude elements that have a specific class.
More info here:
