Increase Size of Header Image

Home › Forums › Automattic › Forefront › Increase Size of Header Image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 22, 2013 at 4:17 pm #107993 Resolve

    Sarah Jane Holden
    Member

    Hi,

    I’m using a custom image of my business name for my header image but I would like to enlarge the size of this image slightly-there is space to do it.

    Suggestions on how to accomplish this?

    Thanks so much!

    The blog I need help with is buildingblockssll.com
    August 22, 2013 at 6:13 pm #138781

    Caroline Moore

    Howdy!

    You can increase the width of your logo with the following custom CSS:

    .site-branding {
    
max-width: 360px; /* or however large you want it to be */
    
}

    You may also want to reduce the padding in the header to give the logo and the menu more breathing room:

    .site-header {
    
padding: 24px 20px;
    
}
    
@media screen and (min-width: 1230px) {
    
.site-header {
    
padding-right: 70px;
    
padding-left: 70px;
    
}
    
}

    August 22, 2013 at 7:22 pm #138792

    Sarah Jane Holden
    Member

    OK, thanks for your help. I’m not exactly loving the way this looks yet and trying to work it out. Like a bigger logo-but it feels very scrunched to me. Even with the adjustment.

    Any way to move the menu BELOW the header (and above the featured image). I think this would work well given there is so much negative space on my image.

    Thanks for your help!

    August 23, 2013 at 2:48 pm #138846

    Caroline Moore

    It looks like you’ve moved the menu below the header already — did you want to adjust its positioning further, or is it good where it is?

    August 23, 2013 at 5:05 pm #138850

    Sarah Jane Holden
    Member

    Are you looking at the mobile version? On the mobile version, it is below the header, but on my computer the menu appears to the right of my header.

    September 3, 2013 at 7:22 pm #139442

    Kathryn P.
    Happiness Engineer

    Hi there, if you still want to move the menu below your logo, you could try this code:

    #masthead {
    
margin-right: 300px;
    
}

    This will push your menu below the logo, although I do think it looks quite good where it is now. :-)

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Increase Size of Header Image’ is closed to new replies.