Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Combined Header – Minimum Height Vertical Align

Home Forums Support Combined Header – Minimum Height Vertical Align

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #401684
    Elton

    I’m using Custom Headers and merged my site header & page headers.

    I want to set the minimum height of the combined header to ensure consistently across the site.

    Using Customize > Additonal CSS I set this custom CSS

    .generate-merged-header {
    	min-height: 450px;
    }

    Now my content is no longer vertically aligned within the container. I have “Add Padding” enabled for the Custom Header, butu I want the padding to be automatic so the Page Header content is all aligned vertically.

    Thanks.

    GP Premium 1.4.3
    #401714
    Tom
    Lead Developer
    Lead Developer

    Have you considered adding top/bottom padding to the Page Header? That way it will have whatever height you need, and everything will stay vertically center.

    Let me know 🙂

    #401763
    Elton

    Hi Tom,

    I had tried using the top & bottom padding, but I wanted a more universal method. Some pages, especially in the blog, have long heading & will take 2 or 3 lines of text. I’d like to do it in a way that I can set for all pages regardless of title length or the amount of content in the header.

    Thank you.

    #402096
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to the site so I can see?

    #402301
    Elton

    Hi Tom,

    Unfortunately not. I’m currently developing a new site on a LOCALHOST only installation.

    Thanks.

    #402373
    Tom
    Lead Developer
    Lead Developer

    I wonder if this would do it:

    .page-header-content {
        min-height: 450px;
    }
    #404610
    Elton

    Hi Tom,

    Sorry, That doesn’t work either.

    Any content in the header is still aligned to the top.

    Thanks.

    #404707
    Elton

    Hi Tom,

    I was able to figure this one out using the CSS below; but the key was to set the page header div to display as a Flex container.

    .page-header-content {
    	display: -webkit-flex;
    	display: flex;
    	-webkit-justify-content: center;
    	justify-content: center;
    	-webkit-align-items: center;
    	align-items: center;
        min-height: 380px;
    	text-shadow: 1px 1px 1px #000000
    }

    Thank you.

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