Center logo

Hi there,

try this CSS for centering the logo:

@media(min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: center;
    }
    .site-logo {
        order: -1;
        margin-right: auto;
    }
}

You can increase the logo size in Customizer > Site Identity.

That centers it vertically I think. Can I get it centered horizontally as well? THanks

Quick question - are you going to want to add other content to the left of the logo ( like you have in header widget )?

For now no, but I don't understand "( like you have in header widget )?"

Hi Charles,

What David mentioned is the ads section in header widget.

The ads section and your logo are fairly big, you can use this CSS to make the logo center:

.site-logo {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}

.header-widget {
    margin-left: auto;
}

But in smaller screen, they will overlap each other like this:
https://www.screencast.com/t/hzWQP8ftY

So I would not recommend centering the logo horizontally.

Hi, yes I'd like to center the logo on the left side of the white space not the center of the whole width. As if there were two columns.

Remove your current CSS and add this:

@media(min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: center;
    }
    .site-logo {
        order: -1;
        margin-right: auto;
        margin-left: auto;
    }
}