Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header Not Aligned With Nav Menu
- This topic has 9 replies, 2 voices, and was last updated 10 years, 5 months ago by nutsandbolts.
-
AuthorPosts
-
November 5, 2013 at 7:45 am #71041dwaynekilbourneMember
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 KonceptzNovember 5, 2013 at 11:46 am #71065nutsandboltsMemberIf 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+November 5, 2013 at 5:42 pm #71145dwaynekilbourneMemberI 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 KonceptzNovember 5, 2013 at 7:48 pm #71160nutsandboltsMemberTry 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+November 5, 2013 at 9:29 pm #71189dwaynekilbourneMemberlooks 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 KonceptzNovember 5, 2013 at 9:31 pm #71190nutsandboltsMemberOh 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+November 6, 2013 at 8:42 am #71241dwaynekilbourneMemberI 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 KonceptzNovember 6, 2013 at 8:46 am #71242nutsandboltsMemberDo 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+November 6, 2013 at 6:09 pm #71337dwaynekilbourneMemberWP Super Cache is loaded and active at the moment!
Dwayne Kilbourne
Founder, Killer KonceptzNovember 6, 2013 at 6:11 pm #71339nutsandboltsMemberAh, now I can see it.
Find
#title-area
in your stylesheet and addtext-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+ -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.