• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Left Justified Header Banner

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Left Justified Header Banner

This topic is: not resolved

Tagged: banner, header, Logo

  • This topic has 9 replies, 3 voices, and was last updated 12 years, 6 months ago by Hank.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 6, 2012 at 5:01 pm #3633
    Hank
    Member

    Hi All,

    So, I have a banner that that want to align to the left line of my inner body. On one of my monitors it is working perfectly. One a few others it isn't

    Any idea why this is happening?

    losaltoscf.org/test

    Regards,

    Hank


    Hank Drew
    losaltoscf.org

    December 7, 2012 at 3:00 pm #3783
    Hank
    Member

    No Ideas?


    Hank Drew
    losaltoscf.org

    December 11, 2012 at 1:55 pm #4551
    Kraft
    Member

    I only have a second so I can't nail it down, but for the others checking out this thread:

    It appears that the logo is horizontally responsive--that the header background (CSS on page, line 41) isn't set to a position so it's moving around based on how wide the window is.

    For me, it appears to be too far left, but if I reduce the width of the window, it eventually lines up. My guess is one monitor is wider than the other?


    Brandon Kraft
    Volunteer
    Blog | Twitter
    Genesis eNews Extended Support

    December 11, 2012 at 2:01 pm #4552
    ramseyp
    Member

    Hi Hank,

    You have a couple of steps to take to make this work. First, you'll need to set a constraint on the div in #header with the class of wrap. In your style.css, you can set this declaration:

    #header > .wrap { width: 960px; margin: 0 auto; }

    This sets the contents of the header to the width of the #inner div and aligns the div with #inner.

    You want to next edit the style.css to remove the left margin from the title area. Look for this in style.css:

    .header-image #title-area,.header-image #title, .header-image #title a

    Remove this line from that style declaration: margin-left: 400px;

    You now have a header that will align content with the left & right sides of the #inner div. Your header image, though, is a bit out of place. You'll want to edit the image so its contents are shifted approximately 30 or so pixels left.


    Community • Work • Conversations

    December 11, 2012 at 2:30 pm #4553
    Hank
    Member

    Hey,

    Thanks for the suggestions Will give that a try.

    Was beating my head against my monitor looking for the correct css settings.


    Hank Drew
    losaltoscf.org

    December 11, 2012 at 4:04 pm #4576
    Hank
    Member

    Sorry to be a bother again, but I appear to still have that same problem. Now it aligns to my 16:9 monitor. But not to my co-workers. And not on any of the 4:3 monitors.

     


    Hank Drew
    losaltoscf.org

    December 11, 2012 at 11:52 pm #4631
    ramseyp
    Member

    Hrmm... I didn't notice that the first line of CSS I wrote down got mangled. It should read:

    #header > .wrap { width: 960px; margin: 0 auto; }

    (There's a greater-than symbol after #header.)

    I don't see any CSS applied to the .wrap div inside #header, looking at your site. Double-check the CSS & see if it changes things.


    Community • Work • Conversations

    December 11, 2012 at 11:54 pm #4634
    Kraft
    Member
    #header > .wrap

    Just seeing if I could get it to work with the forum 🙂

    update: Guess not.


    Brandon Kraft
    Volunteer
    Blog | Twitter
    Genesis eNews Extended Support

    December 12, 2012 at 12:00 am #4637
    ramseyp
    Member

    Gah. Trying to get code snippets in here is a wee-bit frustrating.

    You can see the proper line of CSS at this link: http://pastie.org/5514534


    Community • Work • Conversations

    December 12, 2012 at 12:19 pm #4744
    Hank
    Member

    That is ODD. I will give that a try!


    Hank Drew
    losaltoscf.org

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble