Header Isn't Centered

[Brenda]

My header is no longer centered. It's aligning to the left.

http://www.triplebraidedlife.com

[rfmeier]

Brenda,

It seems the header position is off when you upload a header in Genesis. You will have to override the centering within the style.css file background-position: center center !important; . Full code below;

#header {
     height: 238px;
     background-color: #FFF;
     background-position: center center !important;
}

I hope this helps.

---

Ryan Meier – Twitter

[Brenda]

Ryan, thank you for your help, but your suggestion didn't work. I did something to it a few weeks ago when I was trying to make it full width.

I put the code you suggested under the "Header" section int he style.css, but nothing changed.

Any other suggestions?

[rfmeier]

Brenda,

Are you using the custom header from the theme settings? That puts in css that is hard to override. You could always center the #header element.

#header{
    max-width: 940px;
    margin: 0 auto;
}

---

Ryan Meier – Twitter

[Brenda]

I just went to my site, and it works now! I guess the first suggestion took some time to show up. Thank you for your time and help!!

[Brenda]

Actually, it didn't work. I tried a different header and that's what I'm seeing. The old header is still not centered. I will try your second suggestion. Thank you!

[rfmeier]

Make sure to turn off your caching when you do any css updates. Even with the cache plugin turned off, your css could still be browser cached preventing you from seeing any changes.

---

Ryan Meier – Twitter

[rfmeier]

Also, for the first css I provided you, make sure that code is after any other header related css rules or else it will not override existing styles properly.

---

Ryan Meier – Twitter

[Brenda]

OK, I don't think I know how to turn off caching besides the plugin.

I put the code under Appearance: Editor: Header. I put it underneath the other code under header.

It's still not working. 🙁

[rfmeier]

I think your style.css is being minified by a plugin or some other source, which is probably causing a cache. This would prevent changes from appearing. Make sure you have the !important include in background-position: center center !important; so the changes will override the header image style rules.

---

Ryan Meier – Twitter

[Author]

Posts