[Resolved] Centered logo in footer

Home Forums Support Centered logo in footer

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #969519
    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

    #969610
    Leo
    Staff
    Customer Support

    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 🙂

    #1062279
    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

    #1062299
    Alex

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

    #1062479
    Leo
    Staff
    Customer Support

    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 🙂

    #1062878
    Alex

    Certainly. I’ve edited my original post.

    #1062900
    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

    #1063118
    David
    Staff
    Customer Support

    Hi there,

    that link requires a login? Can you provide access

    #1063120
    Alex

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

    #1063123
    Alex

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

    #1063136
    David
    Staff
    Customer Support

    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

    #1063142
    Alex

    Done.

    #1063196
    Leo
    Staff
    Customer Support

    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 🙂

    #1063202
    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

    #1063238
    Leo
    Staff
    Customer Support

    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 🙂

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.