Header Image Misalignment

Community Forums Forums Design Tips and Tricks Header Image Misalignment

This topic is: not resolved

Tagged: , ,

This topic contains 9 replies, has 4 voices, and was last updated by  boogybren 1 year, 9 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #14239

    boogybren
    Participant
    Post count: 10

    Greetings,

    If I use just the default header text for my header, it aligns up beautifully with the menus on the right . However when I upload my custom image of any size, it pushes the image higher than the menus to the right.

    This is what I tried:

    – Created an image 700px by 100px. WordPress wants to crop it to what appears to be the 960px by 100px aspect, which effectively makes the image bigger but poorer quality. See 700px100px

    – Created an image 300px by 100px. WordPress wants to crop it to what appears to be the 960px by 100px aspect, which effectively makes the image bigger but much poorer quality. See 300px100px

    – Created an image 960px by 100px. WordPress accepted it without asking me to crop it. But it sits above my menu. See 960px100px

    – Changed the functions.php of my child theme from:

    add_theme_support( 'genesis-custom-header', array( 'width' => 960, 'height' => 100 ) );

    To…

    add_theme_support( 'genesis-custom-header', array( 'width' => 300, 'height' => 100 ) );

    …and used the 300px image again however the results resembled the 960px100px image.

    I am just trying to get it to line up with the menu just like the default header text does. See default

    How can I achieve this?

    Best regards,
    Brenden

    • This topic was modified 1 year, 10 months ago by  boogybren. Reason: cleaning up the post
    • This topic was modified 1 year, 10 months ago by  boogybren. Reason: forgot pertinent information
    • This topic was modified 1 year, 10 months ago by  boogybren. Reason: cleaning up the post
    • This topic was modified 1 year, 10 months ago by  boogybren. Reason: forgot pertinent information
    #14542

    Maricar
    Participant
    Post count: 6

    I’m also interested in finding the solution to this issue. So, I’m bumping it up.

    #15907

    Bill Murray
    Participant
    Post count: 575

    Without a link to a publicly accessible site, it’s hard to get valuable feedback.


    Web: https://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #16320

    boogybren
    Participant
    Post count: 10

    What would seeing my site provide differently from the several screenshots I provided?

    #16332

    braddalton
    Participant
    Post count: 10577

    Then we can inspect the CSS and HTML using Firebug.

    What theme are you using?

    I could test all your header images on my local installation with the exact same theme and work out a solution.


    #16338

    boogybren
    Participant
    Post count: 10

    Thanks Brad, that makes sense.

    You can hit the site at http://66.147.232.234.

    I am using Genesis with child theme Optimal from appfinite.com.

    Let me know if you need anything further.

    #16358

    braddalton
    Participant
    Post count: 10577

    Here’s what i see:

    [css]
    #title-area {
    float: left;
    overflow: hidden;
    padding: 20px 0;
    width: 250px;
    }

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 100px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 400px;
    }
    [/css]

    There’s an edit there that may be the problem but hard to say because this theme isn’t included in the Pro Plus package.
    [css]
    /* My Edit */
    border-top: 20px solid #000;
    }
    [/css]
    Try removing this code and uploading the header with 100px height.


    #19543

    boogybren
    Participant
    Post count: 10

    Brad, thank you for replying. I am sorry for the late response, I never received notification that you replied to my post.

    I have commented out that entry however it didn’t change any of the results.

    #19547

    braddalton
    Participant
    Post count: 10577

    Can’t see your header image.

    You can use CSS to adjust the padding etc.


    #19741

    boogybren
    Participant
    Post count: 10

    Sorry, I removed the image. When I get back to my computer, I will upload them again so you can see.

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

You must be logged in to reply to this topic.