Change main header size

[jreges]

Hi,

 

I need change the main header size (where there’s a picture), I have looking for do this, but can’t find. Can someone help me?

[Yazmin]

Hello,

You can change the padding above and below the page title and in combination with changing the height of the header area.

Go to Appearance > Customize > Additional CSS and add this CSS code:

.main-header {
    min-height: 300px !important;
}
.header-title {
    padding: 70px 0;
}

Change 70px and 300px to whatever you want to see how this affects the size of the header area.
Please note that the !important text in the first part is needed to override this particular value.

You will need experiment with different values to get the look you want.

[jreges]

Hi,

 

Thank u so much! But I need one more help. The text in the main-header is out of alignment. Can I put this on center?

[Yazmin]

To center the text in the header, add this Additional CSS:

.header-title {
    text-align: center;
}

or together with the previous “.header-title” code, like this:

.header-title {
    padding: 70px 0;
    text-align: center;
}

[jreges]

I think that i explain the wrong way.. I need to put the text up like the image bellow.

 

Thank u again,

 

 

 

[Yazmin]

OK, when I view your site the title is positioned differently to how it look in your screenshot image.

Anyway, you could try this instead:

.header-title {
    padding: 10px 0 20px;
}

this will give it a top padding of 10px and a bottom padding of 20px

or also try this:

.header-title {
    padding: 0 0 20px;
    margin-top: -50px;
}

[jreges]

Ok!

That worked!

Thanks!

[Author]

Posts