Centering the site logo

[Dandelion222]

Hi Bill,

I would like to have it so that when screens are smaller and the navigation is on a different line than the logo, that the logo will be centered. I re-sized the file to be certain that there was an equal amount of space on either side of the main logo in the graphic file. But it still looks a bit off when I reduce the window size.

Is there a way to center it, but only when it’s resizing for a smaller screen?

[Bill Robbins]

Great question. On smaller devices, the logo will center itself in the header area. I took a look at the logo image file and it appears that the whitespace is different sizes around the image portion of the logo file. Since the browser will use the dimensions of the image file instead of just the content portion, that’s causing it to be slightly off on smaller browser windows.

What I would suggest is cropping the image so that the whitespace is uniform around the image. Then use some CSS to reposition the image for larger browser windows so that it goes where you want it to go. I think that will work out best here.

1. In your WordPress dashboard click on the Appearance section and choose Theme Options.
2. From the tabs at the top, choose the Advanced one.
3. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (min-width: 1024px) {
   
   	#logo {
   		top: 0px;
   		left: 17px;
   	}
   
   }
   

4. Save your changes.

You can change the top: 0px to move the logo up or down and the left: 17px to move it right or left.

Let me know if you run into any questions or trouble there.

Take care,
Bill

[Author]

Posts