[Resolved] Centering site-logo (using generate_before_header hook)

[Sue]

I’m having trouble centering the site-logo I set up using the before_header hook. Right now the 960 px wide image is off to the side, and I can’t figure out how to center it above the rest of the content.

[Elvin]

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.

[Leo]

Hi Sue,

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

[Sue]

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.

[Elvin]

Nice one! That makes sense, I see that you’re utilizing the display rules. Great job. 😀

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

[Sue]

Thanks again! Closing the topic. 🙂

[Leo]

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.

[Sue]

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!

[Leo]

Sounds good.

Just comment here again if you need more info 🙂

[Author]

Posts