Decor Theme Header Image

[KathleenCD]

I've upoaded a header image sized as specified 1140 x 140. There are 2 issues:
1. Since replacing the text with my image the black background for the primary navigation menu is gone
2. the header image is cut off on my Ipad & iphone

Is there a way of making this work? Here's the URL - http://wedontbakemuffinsbookclub.com

http://wedontbakemuffinsbookclub.com

[ramseyp]

Hrmm,

Looking at the CSS, when I removed "float: left;" from this style declaration:

.header-image #title-area, 
.header-image #title, 
.header-image #title a

The header assumed its full max-width of 1140px. There are two places you want to edit your theme's style.css.

On line 191, look for #header:

#header {
margin: 0 auto;
min-height: 140px;
width: 1140px;
}

Edit this declaration to read:

#header {
margin: 0 auto;
min-height: 140px;
width: 1140px;
background-size: 100% auto!important;
}

This will tell the header's background image to fit its element's full width & to adjust its height accordingly. For browsers that honor background-size ( Latest versions of Chrome, Firefox, Safari and I think IE 10 ), this will keep the background image from being cropped.

To fix the header div from being less than full-width, look in your theme's style.css for line 265:

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

Edit it to read:

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

This will tell the header, on screens that are wide enough, to fill the max-width of 1140 pixels.

Note - when your screen size is smaller, the header's background image will be shorter, so the body's background will show. Not sure the approach to fix this - you might try adding a background color to the header.

---

Community • Work • Conversations

[Author]

Posts