Header Not Aligned With Nav Menu

[dwaynekilbourne]

It appears that the header is left-aligned and does not line up with the navigation menu area. This is especially visible when I change background colors!

I'm 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

http://rollercoastermedialibrary.com

[nutsandbolts]

If you remove the header image in Appearance > Header, you can add it manually in your stylesheet (and it will be centered) by adding this:

#header {
background: url(http://70.87.126.227/~rcml/wp-content/uploads/2013/08/header1.png) center no-repeat !important;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[dwaynekilbourne]

I appreciate that idea, Nuts & Bolts. Now, I just need to get the right color coordination along the sides. I'm thinking about using that #91C441 green, but it seems to be wanting to cover the entire page (hence making my titles disappear upon hovering over them - since I use the same color on them). Ideally, the inner portion of the pages will remain white while still allowing me to add a bit of color for my friend's site since he is not thrilled with the extended white space! 🙂

---

Dwayne Kilbourne
Founder, Killer Konceptz

[nutsandbolts]

Try this - look for the following in your stylesheet:

#content, #content-sidebar-wrap {
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 100%;
}

and change to this:

#content, #content-sidebar-wrap {
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
width: 100%;
background: #fff;
padding-top: 40px;
}

That makes the content areas white but still leaves the background color on the sides. Then you can adjust the space between the nav and content area by changing

#inner {
clear: both;
overflow: hidden;
padding: 60px 0;
}

to this:

#inner {
clear: both;
overflow: hidden;
padding: 10px 0;
}

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[dwaynekilbourne]

looks a lot better thanks... Ironically, the site then showed the site name in white letters in the header even though I had that option turned off, but I deleted the site name from general settings, and that seemed to solve it for the most part! I appreciate your input and added expertise!

---

Dwayne Kilbourne
Founder, Killer Konceptz

[nutsandbolts]

Oh no! Don't remove the site name in the settings - that's horrible for SEO. Instead, look to be sure .site-title doesn't have any text shadow in your stylesheet. Or, if you want, put it back and let me take a look, and I'll tell you how to get rid of it.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[dwaynekilbourne]

I agree that removing that is horrible for SEO. I just did it for a moment to ensure that was the actual problem... take a peek at it and see if you can replicate issue. Note that it is an issue when you make the browser window smaller.

---

Dwayne Kilbourne
Founder, Killer Konceptz

[nutsandbolts]

Do you have a caching plugin or Cloudflare active? I'm still seeing the site with no title.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[dwaynekilbourne]

WP Super Cache is loaded and active at the moment!

---

Dwayne Kilbourne
Founder, Killer Konceptz

[nutsandbolts]

Ah, now I can see it.

Find #title-area in your stylesheet and add text-indent: -9999px; to the list of CSS rules. That should get rid of it.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Author]

Posts