Perfect header positioning

  • For my header logo image, (see code below from responsive.css that controls the image), how would I go about nudging the image down just slightly and also nudging it slightly left so that it fits and looks perfectly visually balanced within in the header frame? I am using a custom theme, and do not have access to the developer.

    #logo {width: 500px; left: 0; float: left; text-align: center; z-index: 2; height:66px;}
    .home #logo {width: 500px; left: 0; float: left; text-align: center; z-index: 2; height:66px;}

Viewing 3 replies - 1 through 3 (of 3 total)

  • Copy both of these statements to the bottom of your CSS file.

    The float:left is what makes the logo display flush left. To nudge it LEFT, you will need to use a negative margin because it is already set for ‘0’.

    Add margin-left:-0.25em; (Edit -0.25 until you get the location you want.) When you use the negative margin, the image may disappear behind another section that is defined in the header (and I cannot see here.)

    Nudge down: Add margin-top:0.25em (Edit 0.25 until you get the location you want.)

    Thread Starter Gem777

    (@gem777)

    So paste exactly like this?

    margin-left:-0.25em;margin-top:0.25em;

    And paste as the very last thing, at the very bottom?

    You want to put them inside of the existing selectors (#logo and .home #logo), like this

    #logo {width: 500px; left: 0; float: left; text-align: center; z-index: 2; height:66px; margin-left:-0.25em;margin-top:0.25em;}
    .home #logo {width: 500px; left: 0; float: left; text-align: center; z-index: 2; height:66px; margin-left:-0.25em;margin-top:0.25em;}

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Perfect header positioning’ is closed to new replies.

Tags