Shift logo left or right, instead of centred

• 

  newandrew · Member · Jul 3, 2017 at 4:49 am

  • Copy link
  • Add topic to favorites

  I would like to override the centering of the logo on my theme. I plan to change background images with regularity. Based on the image, I may want the logo to appear on the left or right, so as not to obscure some key element of the image. Under my premium plan, what CSS would I use?

  Once the logo is aligned left or right, I will then want to add left or right padding so that the logo is not flush with the edge of the browser.

  For instance, logo left aligned, but with a 100px gap between the logo and the left edge of the viewport.

  Thank you very much for your help.

  The blog I need help with is: (visible only to logged in users)

• 

  sewingpattern · Member · Jul 3, 2017 at 6:03 am

  • Copy link

  Hello!

  If you would like your logo to appear on the left, you can paste this code into your CSS customizer:

  .site-logo, .custom-logo {
      float: left;
      margin: 0 0 0 1px; }

  And you can change the “1px” in the margin to whatever you please, and it will adjust the space on the left side of the image. There does seem to be a decent buffer naturally, so you may not even need to add any. If you decide you don’t want any extra margin, don’t delete the line of code regarding the margin – you can just change the last number to 0. This ensures that the original styling is overwritten.

  Contrarily, if you want to align the image to the right, paste this code in:

  .site-logo, .custom-logo {
      float: right;
      margin: 0 1px 0 0; }

  Once again, you may change the “1px” in the margin to any number you’d like, or change it to 0.

  Let me know if this does not work, or causes any problems!

• 

  newandrew · Member · Jul 3, 2017 at 6:27 am

  • Copy link

  sewingpattern, that worked like magic! Thanks heaps for your speedy assistance. :)

  Andrew

• 

  sewingpattern · Member · Jul 3, 2017 at 1:33 pm

  • Copy link

  Yay! You’re welcome! :)