Centering site-logo (using generate_before_header hook)

Hi Sue,

You can try adding this CSS code to your site.

.site-logo {
    max-width: 100%;
    display: flex;
    justify-content: center;
}

Here's a demo video of how it'll look like.
https://share.getcloudapp.com/NQur9Qqo

Let us know if it works for you.

Hi Sue,

Any specific reasons why you are using a hook instead of the default logo field under Customizer > Site Identity?

Hooray -- Elvin's solution worked! Thanks.
Leo: The reason I was using hooks was because there are going to be different header images on each page, and my impression was that I have to use hooks for that.

Nice one! That makes sense, I see that you're utilizing the display rules. Great job. :D

No problem. Always glad to be of any help.:)

Thanks again! Closing the topic. :)

How many different logo images are you using?

Personally I'd go with the filter solution instead of hook:
https://docs.generatepress.com/article/generate_logo/

Couple advantages of using the filter instead of a custom hook:

- The original HTML markup of the logo is kept

- The filter solution allows you to write one snippet and take care of multiple display rules as opposed to one element per display rule.

I spent a lot of time staring at that page and wasn't sure how I would actually DO that, but I think I get it -- I'd have to install a plugin like Code Snippets first. I will try it and see if I can figure it out!

Sounds good.

Just comment here again if you need more info :)