Replace site title with logo image and center it

Hi @strikingconcepts,

You can centre the logo with some custom CSS.

As noted in the thread you linked to: To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme in order to centre your logo:

.site-branding {
    position: initial;
    width: 60%;
}

Increase/decrease the value of width to adjust the size of the logo to your liking.

You can then adjust the positioning by changing the value of padding-top:

.site-branding {
    padding-top: 25em;
}

Please note that increments/decrements of one are enough to have an impact e.g. 26em, 27em, etc.

Hope that helps out! ?? Let me know if extra questions come up.

Thank you for these style rules. They work well for medium sized screen resolutions, but the logo is not visible on iPhone resolution and is placed right in the middle on a 1920px width resolution. It would be nice if there is a way to push the logo to the bottom of the page on all resolutions. Is that possible?

Although your site description is hidden, it’s still taking up some space at the bottom of your header. If you don’t have plans to display the site description, then you could use CSS to completely hide it and push the logo further to the bottom with the following:

.site-description {
    display: none;
}

In addition, removing padding from the bottom would push it further down:

.site-branding {
    padding-bottom: 0;
}

Further to that: It is possible to target devices of certain widths with CSS using media queries. Testing media queries and CSS snippets for different devices goes beyond the scope of support that this forum is intended for, but the following documentation is good source of information:

• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
• https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

I also recommend using your browser’s built in tools to inspect your site’s existing CSS and experiment with the specific CSS for your needs. You can find guidance on how to do that here:

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

Hope that’s helpful!