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

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

Home Forums Support Make Fullscreen Page header less than 100%

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #611729
    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.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #611775
    David
    Staff
    Customer Support

    You can try this CSS:

    .generate-page-header {
        height: calc(100vh - 200px);
    }
    #611807
    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?

    #611820
    David
    Staff
    Customer Support
    #612286
    Paul

    It’s on localhost unfortunately.

    #612302
    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);
    }
    #612678
    David
    Staff
    Customer Support

    Hi Paul, glad you found the solution!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.