[Support request] Main Content Scroll Over Hero

[Damon]

Hello.
(Please delete if not allowed).

Has anyone customised GP so that the main content scrolls over the top of the hero image? Like in this example https://wordpress.org/themes/sixteen/
If so could you tell me how please?

Kind regards

[David]

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 ?

[Damon]

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

[David]

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/

[Damon]

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

[David]

Let us know how you get on!

[Damon]

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.

[David]

Can you share a link to your site?

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

[Damon]

Hi David
See private info.
Thank you
Damon

[David]

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….

[Author]

Posts