Fixed page header

[Faye]

Hi there,

I’ve been asked if I can make the page headers fixed, so that when you scroll, the text disappears under the image.
I have a page header image on each page, set using the featured image (as background image, full width) and page header add-on.
I can fix the site header area in place (which has no image), but not the individual page headers.
I can’t see how I can make this a fixed item. Is this possible?

Thanks for your help.
Faye.

[Leo]

Hi Faye,

This post should help: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

If what Leo linked to doesn’t help, can you link to an example of what you’re after?

Thanks! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Faye]

Thanks Leo – I already read through that post and it’s how I got the site header static (which just contains navigation on the site I’m working on). However, what the client wants is for the page headers to be static also (there is an option to add a page header on each page, which is what I have done with this particular design).

However, having thought about this a bit more today, it would be no good on mobile sites because it would basically render the site unusable – you wouldn’t be able to scroll down past the static image and the screen would be too small to provide a decent amount of text under the headers (menu + page header).

I’m going to go back to them with some mobile screenshots and see what they say. It’s not how I envisaged the site working – it turns out that implementation is something that both sides can imagine in very different ways!

[Faye]

Ah ha, I was wrong.

The image should stay in the same position, but everything else scrolls up over it (not under it, as I thought).

Is that possible with page headers?

[Leo]

Ahh I see.

The video on this page should get you close: https://docs.generatepress.com/article/page-header-overview/

Then you might need to change the parallax speed using a filter as the post below. Make sure you are using GP Premium 1.2.93:
https://generatepress.com/forums/topic/parallax-speed-or-whatever/#post-250704

Let us know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Faye]

Hmm. That wasn’t really what I wanted. I’ve gotten there (eventually!) by setting the page header background image as fixed, centred, no repeat and cover. I’ve had to rejig the image so it looks correct. However, it stays completely static while the rest of the page scrolls.
Thank you for your help.

[Leo]

Sweet glad you found a solution!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts