Centering header image above nav?

[dwaynekilbourne]

Ladies and gents,

I changed the color of the background of this hobby site using the tools directly in WordPress (Appearance ===> Background) Now, the image that I have loaded as the header is aligned left when I pull it up via Chrome (although, the background color change does NOT show up when opening in FireFox).

1. So, how can I best center the header image so that it properly centers above the nav?

2. Show I be using the background color change function built-in to WordPress or strictly CSS? I want to be sure that everything shows across ALL browsers unlike how it does right now.

Site in question = http://rollercoastermedialibrary.com/

---

Dwayne Kilbourne
Founder, Killer Konceptz

http://rollercoastermedialibrary.com/

[AnitaC]

I see this fine in Firefox and Chrome so you must have worked this out. If so, can you be kind enough to mark it resolved. Thanks.

---

Need help with customization or troubleshooting? Reach out to me.

[dwaynekilbourne]

not resolved on my screen... color is okay, but the white header is left aligned when it should be centered. Thoughts?

---

Dwayne Kilbourne
Founder, Killer Konceptz

[AnitaC]

One reason it might not be centered for you is that you have the Search box in Header Right. If you remove that - the entire header should center.

---

Need help with customization or troubleshooting? Reach out to me.

[dwaynekilbourne]

Removed header-right search, and that still did not do anything. The CSS code for the header right merely places it on the page and does not appear to affect the actual header graphic.

I'm guessing that I'm missing some code near the header-image part of the style.php

---

Dwayne Kilbourne
Founder, Killer Konceptz

[AnitaC]

Using Firebug, it now appears that you don't have a left margin in there.

---

Need help with customization or troubleshooting? Reach out to me.

[dwaynekilbourne]

I guess that it was never in there. Let me see what it shows for the navigation, and then I will try to implement the same code for the header!

---

Dwayne Kilbourne
Founder, Killer Konceptz

[dwaynekilbourne]

still missing something... played around with margin and padding... here is my CSS for the header area...

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

#header {
background-position: top center !important;
background-color: #111;
min-height: 120px;
overflow: hidden;
width: 100%;
}

#title-area {
float: left;
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: left;
height: 120px;
overflow: hidden;
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%;
}

---

Dwayne Kilbourne
Founder, Killer Konceptz

[dwaynekilbourne]

Still no luck with it. I am going to take a break from it for a few hours and then look at it with fresh eyes - maybe after the extra sleep from changing of the clocks this evening!

---

Dwayne Kilbourne
Founder, Killer Konceptz

[Author]

Posts