Archived topic

Combined Header - Minimum Height Vertical Align

7 replies · Started by Elton on October 11, 2017

Viewing posts 1–8 of 8

October 11, 2017 at 9:01 pm #401684

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.

October 11, 2017 at 11:04 pm #401714

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 :)

October 12, 2017 at 2:10 am #401763

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.

October 12, 2017 at 10:17 am #402096

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

October 12, 2017 at 4:49 pm #402301

Hi Tom,

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

Thanks.

October 12, 2017 at 10:26 pm #402373

I wonder if this would do it:

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

October 16, 2017 at 10:31 pm #404610

Hi Tom,

Sorry, That doesn't work either.

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

Thanks.

October 17, 2017 at 2:53 am #404707

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.

This archived topic is closed to new replies.

Start building better websites today.