1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Moving the logo down

Discussion in 'Styling and Customization Questions' started by System0, Oct 30, 2011.

  1. System0

    System0 Active Member

    By default, the logo is aligned vertically in the middle. I need my logo to be aligned a little lower to match the design of my main site.

    On my main website I achieve this by simply placing padding at the top of the header class. If I add padding: 20px 0 0 0; to the header class it moves the logo to the location I need it, but it also creates 20 pixels of blank space underneath the header.

    I've tried a few different things but can't seem to get it working. Any idea how I can stop the blank space from appearing when padding is added?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    The easiest way is to resize the canvas on your logo and add some transparent space to the top.

    Or you can try adding some CSS to EXTRA.css for the #logo img class.
    You will also need to increase the header size in Style Properties to match.
     
    Dodgeboard likes this.
  3. System0

    System0 Active Member

    That's exactly what I was looking for. I didn't see the img class for the logo underneath the main logo class.

    I've got it aligned perfectly now. :)
     
  4. mrGTB

    mrGTB Well-Known Member

    That's the way I would go about it, it's the easiest method without having to mess about altering code.
     
  5. System0

    System0 Active Member

    I would have used that as a last resort but it would have meant a lot of white space linking to the logo etc so I preferred to go try the coding route first. Thankfully I got it working :)
     

Share This Page