Header Height Expanded When Added Site-Header Logo – inSync

The reason that happened is because the header image has a default height of 164px. This can be changed and adjusted on line 1710 in your CSS. I would start with around 84px like this –

.header-image .site-title a {
    float: left;
    min-height: 84px;
    width: 100%;
}

Next, the other space is coming from the Search Widget in the Widget Area. You can either remove or adjust the padding on line 1725. I would start by adjusting the Top padding, and remove the bottom padding like this –

.header-image .site-header .widget-area {
	padding: 20px 0 0;
}

Let me know if that helps

I don’t have a tutorial for logos just yet since everyone’s logo is different and requires different ways of doing it.

For your logo to center on mobile/tablet devices, you can add this code to your CSS –

.header-image .site-title > a {
	background-size: contain !important;
	background-position: center !important;
}

It should look something like this when viewed on mobile/tablet devices – http://i.imgur.com/kYMocqG.png

Let me know if that works when you add it in.