[Resolved] Footer bar multiple widgets how to align them?

[John MacKenzie]

hi all almost there with the site, but having an issue with the footer bar. I want it to have

my text widget on the left, the copyright in the middle and the little 2 page navigation buttons on the right.

right now copyright goes left and everything else stacks on the right. I saw another support article about adding a hook in after footer content, but that doesnt fully work for me as i am adding in a navigation widget and it goes on a different line than the copyright?

i amay also try to get the language flag switcher in there too, but not sure yet.

thanks!

[Leo]

Hi there,

We should be able to use some CSS for that.

Can you add them as 3 separate widgets in the order (from left to right) you want first?

Let me know 🙂

[John MacKenzie]

Hi Leo

i dont seem to have control of the copyright position since its not part of the widget, and the other 2 elements in my footer widget are in the order they should be, one on top of the other The top one should be left, copyright middle, and the green and brown nav to the right.

Thanks!
J

[Leo]

Can you add the copyright info as a text or HTML widget?

[John MacKenzie]

Hi Leo

thanks i have but then my php code doesnt work, i ve done that for now so you can see, also if i clear out the other copyright the default one gets put back in there?

thanks
John

[Leo]

Hmm little more complicated than I had hoped.

Try adding this PHP first to create the [current_year] shortcode:

add_shortcode( 'current_year', 'lh_current_year' );
function lh_current_year() {
    ob_start();
    echo date('Y');
    return ob_get_clean();
}

Then you can create the copyright widget like this:
© [current_year]

Once you do that we should be able to use CSS to hide the default one and arrange the rest.

Let me know 🙂

[John MacKenzie]

ok thanks, ive dont that

thanks for your help and let me know

[Leo]

Give this a shot:

@media (min-width: 769px) {
    .footer-bar-align-right .footer-bar {
        float: none;
    }
    .footer-bar {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    aside#black-studio-tinymce-40 {
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 768px) {
    .footer-bar {
        flex-direction: column;
    }
}

[John MacKenzie]

thanks leo thats looking great! really appreciate it.

only last issue is once we get below 768px its all squished and the widgets dont seem to “stack” like they should.

if you able to take a peek that would be awesome, thank you so much!

[Leo]

Edited the CSS above:
https://generatepress.com/forums/topic/footer-bar-multiple-widgets-how-to-align-them/#post-803197

Let me know 🙂

[John MacKenzie]

thank you! you guys rock! i tell everyone abut your awesome theme and even more amazing support.

[Leo]

Glad you are enjoying GP and we’ve been helpful 🙂

[Author]

Posts