Community Forums › Forums › Archived Forums › Design Tips and Tricks › Centering header image above nav?
Tagged: Center Header Image
- This topic has 8 replies, 2 voices, and was last updated 10 years, 5 months ago by dwaynekilbourne.
-
AuthorPosts
-
October 26, 2013 at 5:54 am #69059dwaynekilbourneMember
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 KonceptzOctober 26, 2013 at 6:20 am #69065AnitaKeymasterI 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.
Love coffee, chocolate and my Bella!
October 26, 2013 at 7:38 am #69074dwaynekilbourneMembernot resolved on my screen... color is okay, but the white header is left aligned when it should be centered. Thoughts?
Dwayne Kilbourne
Founder, Killer KonceptzOctober 26, 2013 at 8:19 am #69086AnitaKeymasterOne 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.
Love coffee, chocolate and my Bella!
October 26, 2013 at 8:26 am #69090dwaynekilbourneMemberRemoved 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 KonceptzOctober 26, 2013 at 8:31 am #69093AnitaKeymasterUsing Firebug, it now appears that you don't have a left margin in there.
Love coffee, chocolate and my Bella!
October 27, 2013 at 6:11 am #69210dwaynekilbourneMemberI 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 KonceptzOctober 27, 2013 at 6:49 am #69218dwaynekilbourneMemberstill 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 2, 2013 at 3:16 pm #70562dwaynekilbourneMemberStill 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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.