Logo to be in the center

Hi mainwhiteclosetsg.com,

Please can you provide the link.

Hey there mainwhiteclosetsg.com,

Happy new year!

This is definitely possible with some custom CSS. Please try adding the following CSS code in the style.css file of your child theme or add it in your site using the following plugin if your theme doesn’t have custom CSS tab.

https://www.ads-software.com/plugins/simple-custom-css

If you’re using site title add this code:

#header-left-section {
float: none;
}

#header-text {
float: none;
text-align: center;
}

If you’re using logo add this code:

#header-left-section {
float: none;
}

#header-logo-image {
text-align: center;
}

Hope this helps ??

Best regards,
Bojan

Can I ask a very similar question? I’d like to centre the header logo on my site https://www.stuckinabook.com.

I tried copying the code above into CSS editor, but it didn’t change it.

Thanks!

Hey there simonthomasoxford,

Since this is a different issue generally you’d want to open a new thread for the sake of other members.

With this being said if this is what you’re referring to https://screencast.com/t/m9GzLFuUCf then there is a margin and padding on the right side on two different elements preventing your image to be displayed in the center.

To remove it please try adding the following:

div#header-left-section {
  margin-right: 0;
}

div#header-logo-image {
  padding: 0;
}

This should be the result https://screencast.com/t/nRuRhYvB5.

Please let me know if that helps ??

Cheers,
Bojan

Sorry about that; I will try to learn proper forum etiquette, thanks.

And even more thanks for the code; that has worked perfectly, thank you!

Glad I could help ??

Cheers,
Bojan

Oh dear, Bojan, I seem to have done something! I replaced the logo image (as it wasn’t scaling down in Firefox, and showed as enormous) and now it doesn’t centre any more, even with the code you’ve provided.

I’ve added in a margin to the left temporarily, to get it approximately central, but… would you have any idea why the code is no longer centring it?

Sorry to ask again!

Hey again simonthomasoxford,

I’m not sure what happened there but you should be able to make it 100% with the following code:

div#header-logo-image, #header-logo-image img {
  margin-bottom: 0px;
  width: 100%;
  height: auto;
}

Also please remove temporary margin you added there as well ??

Please let me know if this helps.

Best regards,
Bojan

Perfect! Thanks so much, you’ve been so helpful.

Hmm, it has gone unexpectedly small in IE, but that’s not the hugest headache.

Hey there simonthomasoxford,

Glad I could help ??

As for the IE I’ve checked this on my end in IE and everything seems fine https://screencast.com/t/kzx09hZmG.

Best regards,
Bojan