[Support request] Center logo

[Charles]

I’d like to center my logo in the left column on my header. And maybe make it a tad bigger. I can’t see how to do this in customization.

https://gettysburgconnection.org

Thanks.

[David]

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.

[Charles]

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

[David]

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

[Charles]

For now no, but I don’t understand “( like you have in header widget )?”

[Ying]

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.

[Charles]

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.

[David]

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;
    }
}

[Author]

Posts