Editing Header Image from Partial to Full Width

[jenwilson]

Hey there,

We have a revised header image to replace the existing logo on this site. The new header image is going to be full width (1000 px). Any direction where to make changes in the css would be greatly appreciated. I have tried a few things, but they didn't work.

http://www.tomcarnahan.com/

[Brad Dalton]

What theme is it?

Try this http://wpsites.net/web-design/custom-header-image-genesis/

---

Tutorials for StudioPress Themes.

[jenwilson]

This is the Hans theme. See below for the header CSS

/* Header
------------------------------------------------------------ */
#header {
	margin: 0 auto;
	min-height: 120px;
	width: 100%; 
}

#header .wrap {
	margin: 0 auto;
	width: 1000px;
}
 
#title-area {
	float: left;
	overflow: hidden;
	padding: 17px 0 0;
	width: 500px; 
}

#title {
	display: block;
	float: left;
	font-family: 'Muli', arial, serif;
	font-size: 29px;
	line-height: 1.25;
	margin-right: 5px;
	margin: 0;
	text-transform: uppercase; 
}
 
#title a,
#title a:hover {
	color: #c7ca50;
	padding: 0;
	text-decoration: none; 
}
 
#description {
	color: #828487;
	display: inline;
	font-size: 14px;
	line-height: 1.25;
	font-family: 'Muli', arial, serif;
	font-size: 29px;
	font-weight: 300;
	padding: 0 0 0 20px; 
	text-transform: uppercase; 
}
 
#header .widget-area {
	display: block;
	float: right;
	height: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 0; 
}

#header .phone {
	float: right;
	width: 50%; 
}
 
#header .phone h3 {
	color: #d7754a;
	font-family: 'Muli', arial, serif;
	font-size: 21px;
	margin-top: 20px;
	text-align: right;
}
 
/* Image Header - Partial Width
------------------------------------------------------------ */
.header-image #header #title-area {
	background: url(images/logo.png) left top no-repeat;
	float: left;
	margin: 30px 0 0 0; 
}
 
.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: left;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 400px; 
}
 
.header-image #description {
	display: block;
	height: 175;
	overflow: hidden;
	width: 400; 
}

[Brad Dalton]

Change the values for the width to 100% excluding the widget width.

---

Tutorials for StudioPress Themes.

[jenwilson]

Thanks Brad, I tried that and it didn't seem to work. Should I have changed the width in both the Header and the Image Header Partial Width or just one of those?

[jenwilson]

I did change all the widths (except the widget width) to 100% and it didn't work. It actually moved the logo to the far left of the site (maybe has something to do with the wrap...not exactly sure). I'm still not seeing the full 1000 px width of the new header image I have uploaded.

Sorry...struggling with this.

[Author]

Posts