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

Moving the logo down

System0

Active member
#1
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?
 

Brogan

XenForo moderator
Staff member
#2
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.
 

System0

Active member
#3
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. :)
 

mrGTB

Well-known member
#4
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.
That's the way I would go about it, it's the easiest method without having to mess about altering code.
 

System0

Active member
#5
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 :)