[Resolved] Combined Header – Minimum Height Vertical Align

[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.

[Tom]

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 🙂

[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.

[Tom]

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

[Elton]

Hi Tom,

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

Thanks.

[Tom]

I wonder if this would do it:

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

[Elton]

Hi Tom,

Sorry, That doesn’t work either.

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

Thanks.

[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.

[Author]

Posts