[Resolved] Footer alignment

[Tanya]

Hi,

I created a menu for the Footer area. I’d like this menu to be centered in the footer. If I use Layout > Footer > Footer bar alignment = center, the menu is centered, but the Copyright is moved underneath it, creating 2-nd line in the footer, which is not optimal.

Is there a way to have menu centered and copyright message stay on the right of the 1-line footer?

Thank you

[Tom]

Hi there,

Give this CSS a try:

.footer-bar-align-center .footer-bar, 
.footer-bar-align-center .copyright-bar {
    display: inline-block;
    margin: 0 10px;
}

[Tanya]

Hi Tom,

Thanks – that almost does it!
The menu and copyright are centered. However, there seems to be some @media CSS that I am not seeing. When I resize the window to a smaller size (or check on my phone), I see that .footer-bar becomes larger, while .copyright-bar stays the same height. This creates misalignment where Copyright is placed higher than the menu. Is there a way to align these?

Thank you

[Tom]

Give this a shot:

@media (max-width: 768px) {
    .copyright-bar {
        padding: 5px 0;
    }

    .footer-bar-align-center .footer-bar {
        margin-bottom: 0;
    }

    .footer-bar-align-center .footer-bar, 
    .footer-bar-align-center .copyright-bar {
        vertical-align: middle;
    }
}

[Tanya]

Thanks a lot, Tom.

That worked. I tested a couple variations and turns out I just needed vertical-align: middle;
Final version:

/* Align footer menu and copyright */
.footer-bar-align-center .footer-bar,
.footer-bar-align-center .copyright-bar {
display: inline-block;
margin: 0 10px;
vertical-align: middle;
}

[Tom]

Perfect 🙂

[Author]

Posts