Archived topic

Footer alignment

5 replies · Started by Tanya on March 22, 2018

Viewing posts 1–6 of 6

March 22, 2018 at 8:21 pm #527209

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

March 22, 2018 at 9:03 pm #527268

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;
}

March 23, 2018 at 10:50 am #528271

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

March 23, 2018 at 8:48 pm #528798

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;
    }
}

March 26, 2018 at 9:49 am #531312

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;
}

March 26, 2018 at 10:29 am #531395

Perfect :)

This archived topic is closed to new replies.

Start building better websites today.