Making Header Logo Larger in Education Theme

[lgeraty]

How would I go about changing the logo size in my header in the Education Theme?

http://harrisfamilychiropractic.com/site/

[Brad Dalton]

Whats the exact size of your new logo?

---

Code for Paid Members & Clients Only.

[lgeraty]

286 width by 150 height

🙂

[Brad Dalton]

332 x 83 is the default size for theEducation themes logo.

Simply upload your new logo or image to your child themes images folder and remove the default.

Your new image needs to be named logo.png.

If your logo height is larger, you will need to increase several values for the height in your child themes style.css file:

Line 183

#header {
	background-color: #fff !important;
	background-position: center top !important;
	border-top: 4px solid #eee;
	margin: 0 auto;
	min-height: 120px;
	width: 100%;
}

Line 246

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: left;
	height: 120px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 400px;
}

Max width for the logo is 400px otherwise you will need to change the width in your style sheet if its wider.

Line 196

#title-area {
	float: left;
	overflow: hidden;
	padding: 27px 0 0;
	overflow: hidden;
	width: 400px;
}

Line 250

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: left;
	height: 120px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 400px;
}

Then reduce the width for the header right widget by the same amount you increased it above 400px for the width of your logo:

Line 230

#header .widget-area {
	float: right;
	min-height: 95px;
	padding: 25px 0 0 0;
	position: relative;
	width: 740px;
}

If you new logo is 500px width, you would change the value for the header right widget to 640px in the code immediately above.

---

Code for Paid Members & Clients Only.

[Brad Dalton]

You'll also need to go to Appearance > Header > Header Text and make sure Show header text with your image is unchecked.

---

Code for Paid Members & Clients Only.

[SueCrawford]

I'm following along here since this is what I want to do also. It works great, but now how do I get the navigation in the Header Right widget to drop down to meet the top of the color block?

Thanks!!

[Brad Dalton]

I would start a new topic for this question because it will get more exposure and anwsered faster,

---

Code for Paid Members & Clients Only.

[lgeraty]

Brad,

Okay, I think I am close to figuring this out but I seem to be off on my width settings a bit. I decided to make the logo 380 X 110 and I'm still having issues.

It keeps cutting my logo off and forcing me to crop it.

Any ideas?

Thanks!

[Author]

Posts