Main Content Scroll Over Hero

Hi there,

its possible with some CSS to give the hero a fixed position.

Do you have a site with a page hero and some content so i can look at the requirements ?

Hi David.
Sure thing. I've sent you a login in the private info.
Cheers
Damon

Hmmm... tricky one - for that the hero needs to be fixed at the top of the page, so the site header can't really sit before it. If the header was merged then it may be possible:

https://docs.generatepress.com/article/merging-header-navigation-content/

Cool. Thanks David.
I'll give that a go.
All th best

Let us know how you get on!

Hi David,
I've merged the header but am unsure how to get the main container to scroll over it... I've tried using CSS "position" to no avail.
Any tips from anyone gratefully received.

Can you share a link to your site?

NOTE: When a topic is resolved we automatically remove any private information.

Hi David
See private info.
Thank you
Damon

Kinda close with this CSS:

@media(min-width: 1140px) {
    .page-hero {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    .page-hero + #page {
        position: relative;
    }
}

I only applies to wider screens you can adjust the 1140px to suit.
But the Title as part of the Page Hero so that won't scroll up....