Centering header image above nav?

Community Forums Forums Design Tips and Tricks Centering header image above nav?

This topic is: resolved

This topic contains 8 replies, has 2 voices, and was last updated by  dwaynekilbourne 8 months, 3 weeks ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #69059

    dwaynekilbourne
    Member
    Post count: 18

    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/
    #69065

    anitac
    Participant
    Post count: 6991

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #69074

    dwaynekilbourne
    Member
    Post count: 18

    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

    #69086

    anitac
    Participant
    Post count: 6991

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #69090

    dwaynekilbourne
    Member
    Post count: 18

    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

    #69093

    anitac
    Participant
    Post count: 6991

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


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #69210

    dwaynekilbourne
    Member
    Post count: 18

    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

    #69218

    dwaynekilbourne
    Member
    Post count: 18

    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

    #70562

    dwaynekilbourne
    Member
    Post count: 18

    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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.