Home Forums Trusted Change main header size

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by  jreges 4 months, 3 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #4744

    jreges
    Participant

    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?

    #4745

    Yazmin
    Keymaster

    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.

    #4747

    jreges
    Participant

    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?

    #4749

    Yazmin
    Keymaster

    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;
    }
    #4750

    jreges
    Participant

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

     

    Thank u again,

     

    up

     

     

    #4752

    Yazmin
    Keymaster

    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;
    }
    #4753

    jreges
    Participant

    Ok!

    That worked!

    Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.