Apparition Theme – Header and Header Right

[lizbarnett]

I am working on JenWPhotography.com and when I create a Header that is the suggested 1140 ?— 120 pixels but also add a widget in the Header Right widget box, it pushes the Header Image over to the left rather than putting the widget in an overlay over the image.

For your convenience, here is some of the code as it is now:

/* Wrap
------------------------------------------------------------ */

.wrap {
	margin: 0 auto;
	width: 1140px;
}

/* Header
------------------------------------------------------------ */

#wrap #header {
background-color: #111111 !important;
background-position: center !important;
background-size: contain !important;
min-height: 120px;
overflow: hidden;
width: 100%;
}

#title-area {
	float: center;
	margin: 32px 0 0;
	width: 25%;
}

#title {
	font-family: 'Lato', sans-serif;
	font-size: 42px;
	font-weight: normal;
	line-height: 1.25;
	margin: 0;
	text-transform: uppercase;
}

#title a,
#title a:hover {
	color: #fff;
	text-decoration: none;
}

.header-image #title-area,
.header-image #title,
.header-image #title a {
	display: block;
	float: center;
	height: 120px;
	overflow: visible;
	text-indent: -9999px;
}

.header-image #title-area {
	margin: 0;
	width: 25%;
}

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a,
.header-image #title,
.header-image #title a {
	width: 100%;
}

#description {
	color: #fff;
	font-size: 16px;
}

.header-image #description {
	display: block;
	overflow: hidden;
}

#header .widget-area {
	float: right;
	width: 75%;
}

What do I need to change so that the Header image operates like a header background rather than shifting to the left to allow room for the widget?

---

—
Liz Barnett http://www.LizBarnett.me

http://www.jenwphotography.com

[Sridhar Katakam]

So you want this? -> http://i.imgur.com/Bv9hKHY.png

I will write a detailed blog post tomorrow. Here is the summary:

1) Comment out or delete theme support for genesis-custom-header in child theme's functions.php.

2) Upload this image as JenWPhotographylogo.jpg in child theme's images directory.

3) Add this code in child theme's functions.php. (Source)

4) Add the following at the end of child theme's style.css (WP dashboard -> Appearance -> Editor):

#header {
	background: #060606;
}

.header-image #title-area, .header-image #title-area a {
	text-indent: 0;
}

.header-image #title-area {
	width: 60%;
}

#header .widget-area {
	width: 40%;
	color: #EFEFEF;
	margin-top: 1.3rem;
}

---

Genesis Tutorials | Follow me on Twitter

[Sridhar Katakam]

Bonus:

If you would like to have the logo and widget take full width at mobile widths, use this sample CSS:

@media only screen and (max-width: 500px) {
	.header-image #title-area {
		width: 100%;
	}
	#header .widget-area {
		width: 100%;
	}
	#header .widget-area .widget {
		padding: 1rem;
	}
	.header-image #title-area, .header-image #title, .header-image #title a {
		height: auto;
	}
}

Screenshot: http://i.imgur.com/PRsi8nd.png

---

Genesis Tutorials | Follow me on Twitter

[lizbarnett]

Thank you so much! I will look at this in more detail after I go to bed soon. But yes, you are correct. I want it to look like this:

http://i.imgur.com/Bv9hKHY.png

She has decided she does not like that logo, but I want to set it up so that when she does upload the logo she likes, it will be prepared for it and not move things around.

---

—
Liz Barnett http://www.LizBarnett.me

[lizbarnett]

OK Here is the problem...

I need to be able to have the header (or logo) to be able to be uploaded like this:

>> Dashboard
>> Appearance
>> Header

Because the photographer is having a graphic designer make the logo now. I told her that she will be able to upload it herself easily.

So the image I shared isn't the actual image, just one I was using as a "placeholder".

So whatever happens needs to be easy and dummy proof on the other end, so when I turn the site over to her she can just upload it and everything will function properly without her needing to contact me.

So I don't think this way of doing it is going to work since it involves going to the Control Panel of the host.

Then it also needs to appear properly on mobile devices.

So in summary:
* The client needs to be able to upload and change her header as she wishes
* The widget needs to overlay the header
* The header (logo) should appear properly on mobile

---

—
Liz Barnett http://www.LizBarnett.me

[kmmackey]

Hi,

This may be similar to what I am trying with the lifestyle pro. At my test site - http://www.kathymackeywebservices.com/PGSPN/ - I currently have a full image header. I have another file that I want to add to the header. It is a transparent png that I need to be clickable. The image is in my media library - http://www.kathymackeywebservices.com/PGSPN/wp-content/uploads/2013/12/head2.png
This is currently full width and if it could somehow overlay the first image or if not possible, can I crop the width and put that image into the header right. Maybe I could use your code but I think there are some specifics for the apparition theme that would need to be changed.....Help is appreciated.

Kathy

[Author]

Posts