[Resolved] Centered logo in footer

[Alex]

Hello GP,

I would like my footer bar to have:
Left: Copyright
Center: Logo with link to home
Right: Links to Terms and Privacy pages.

I managed the left Copyright by using the GP Copyright feature with div align left. For the right Privacy and Terms page links I followed instructions from the forum by creating a menu and putting it in the widgets page in the footer bar. So far so good.

Now I wish to add a centered logo (ala GitHub) centered in the page footer. I’ve tried to use an Image widget placed in the footer bar, but it only appears above or under the privacy/terms menu.

What would be the best way to get the centered logo in the footer bar?

Thanks!

Alex

[Leo]

Hi there,

You would need to apply this method:
https://docs.generatepress.com/article/split-header-three-sections/

And use the after_footer_widgets hook instead:
https://docs.generatepress.com/article/hooks-visual-guide/

Let me know if this helps 🙂

[Alex]

Hi Leo,

I apologize for taking this long to reply, I was on other projects. I’ve finally tried your suggested approach, but it doesn’t produce the desired result.

The section added with the split-header-three-sections article is white and doesn’t use the background color of the site and it isn’t constrained in width the the rest of the content. Additionally it appears above the copyright footer, so the logo would be over the copyright bar and not in-between the copyright on the left and copyright menu on the right.

Any idea?

Alex

[Alex]

Actually the section background is not white, but it shows the background image of the body.

[Leo]

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[Alex]

Certainly. I’ve edited my original post.

[Alex]

Hi Leo,

While you’re looking at the bottom of my page, I would also like to have the social icons centered with the ‘Stay Connected’ label. I’ve set the lightweight social icons alignment to center and following one of the solution on the forum I added this to get the ‘Stay Connected’ centered:
.inside-footer-widgets {
text-align: center;
}

But it doesn’t look centered.

Thanks for your help.

Alex

[David]

Hi there,

that link requires a login? Can you provide access

[Alex]

Hi David,
I typed the login and pw in the address field. You don’t see them?
Alex

[Alex]

Ok I see it formatted what I typed into an url. Where can I give the credentials confidentially?

[David]

You can send them via the Account Issue form:

https://generatepress.com/contact/

Please include the URL for this topic in the form so we can track the issue

[Alex]

Done.

[Leo]

Let’s solve one thing at the time and leave the social icon issue for a new topic.

So the issue currently is that the hook section is contained?

If so edit your HTML to this:

<div class="header-section">
    <div class="grid-container">
    <div class="header-section-1">
        <div class="site-logo">
            <a href="URL TO YOUR WEBSITE" title="YOUR SITE NAME" rel="home">
                <img class="header-image" src="URL TO LOGO IMAGE" alt="YOUR SITE NAME" title="YOUR SITE NAME">
            </a>
        </div>
    </div>

    <div class="header-section-2">
        Header center content
    </div>

    <div class="header-section-3">
        Header right content
    </div>
    </div>
</div>

Then you can add the background color like with this CSS:

.header-section {
    background-color: #282f38;
}

Let me know if we are getting closer 🙂

[Alex]

Hi Leo,

So the color of that row will need to be changed manually and won’t be linked with the rest of the GP ‘Colors’?

Also this creates a whole new row above the copyright/privacy row. I want the company icon on the same row. Exactly like the footer of the GitHub page.

Alex

[Leo]

Ahh ok. I misunderstood what you wanted before.

That case you can remove the whole hooks elements idea and just add the logo as a footer bar widget, then we can provide some CSS to position it in the center.

Let me know 🙂

[Author]

Posts