Header Changes

For the header background, take a look in the “Site Header” section around line 1173 and remove or comment out the transparent background color like this –

.front-page .site-header {
	border-bottom: 1px solid #ddd;
	padding-top: 30px;
}

.featured-section .site-header {
	/*background-color: transparent;*/
	border:  none;
}

You can also decrease the Padding for the .front-page .site-header if you want. It’s currently set at 30px for the frontpage, but you can decrease it to 20px or less if you want.

*************************************************************

To increase the logo size, first look around line 1199 and increase the width –

.title-area {
    float: left;
    padding: 25px 0;
    width: 202px;
}

You’ll also need to increase it in the responsive section of your css on line 2505.

Before you do that, I would consider uploading a larger image first. At the moment, the image you have uploaded is only 202px width and 38px height. If you increase this image as it is on the site then it will start to look blurry since it’s being stretched out of it’s natural size. If you upload a larger image, and then make the changes I mentioned above, then the image will show up clear.

Let me know if this helps.

Oh I forgot to mention you’ll need to change the size of the Header/Logo in the functions file before you upload your image (to prevent cropping).

Find out the size of your image, and then go to your functions file and add it in. It should look like this –

//* Add support for custom header
add_theme_support( 'custom-header', array(
	'flex-height'     => true,
	'width'           => 300,
	'height'          => 60,
	'header-selector' => '.site-title a',
	'header-text'     => false,
) );

You’re Welcome!

The reason that’s happening is because the Title/Logo area and the Widget area are both too wide to fit inside the header together. The header is only 1200px wide, so anything that goes beyond that will fall off to the side. We can fix it by decreasing the width on both of those divs. They both have extra space that can be reduced.

Here’s how to fix it –

Around line 1199 in your CSS decrease the 500px width to 400px like this –

.title-area {
    float: left;
    padding: 25px 0;
    width: 400px;
}

Next decrease the Widget area width from 800px to a percentage like 30% like this (line 1258) –

.site-header .widget-area {
	float: right;
	text-align: right;
	width: 30%;
}

You also need to change the widget area width on line 2491 to around 30% as well since this part is what kicks in on smaller browsers like mobile devices, tablets, etc. Only do this for the .site-header .widget-area part. I would separate the .content from the .site-header .widget-area so they’re not both affected together.

Here’s what it looks like by default –

	.content,
	.site-header .widget-area {
		width: 30%;
	}

Here’s how you can change and separate both of them –

.site-header .widget-area {
  width: 30%;
}

.content {
  width: 620px;
}

Let me know if that fixes it.