Archived topic
Make Fullscreen Page header less than 100%
6 replies · Started by Paul on June 29, 2018
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.
You can try this CSS:
.generate-page-header {
height: calc(100vh - 200px);
}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?
Can you share a link?
It's on localhost unfortunately.
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);
}Hi Paul, glad you found the solution!
