[Support request] Make Fullscreen Page header less than 100%

[Paul]

What’s the best way to make a page header that is set to Fullscreen less than 100% of the viewheight? I’d like to have a little bit of the following section visible below the page header and not sure if this can be done via CSS or whether some JS needs altering.

[David]

You can try this CSS:

.generate-page-header {
    height: calc(100vh - 200px);
}

[Paul]

Thanks, David.

That doesn’t work when Fullscreen and Vertical Center Content for the page header is enabled, only when Fullscreen is disabled, however I lose the vertically centered content. How can I get the page header content to remain vertically centered when Fullscreen is disabled?

[David]

Can you share a link?

[Paul]

It’s on localhost unfortunately.

[Paul]

I figured it out. Here’s what’s needed to do this when page header is set to Fullscreen:

/* Fullscreen GP Page Header less than 100% */
.fullscreen-enabled.generate-page-header {
    max-height: calc(100vh - 200px);
}

[David]

Hi Paul, glad you found the solution!

[Author]

Posts