How to align Mobile Footer menu to center

[Amit]

I’ve tried the Footer menu layout to center, left and right. But the footer nav links align themselves to right on mobile and I can’t just figure out what’s wrong. How can I center them?

[David]

Hi there,

try this CSS:

@media(max-width: 1024px) {
    .site-info .inside-site-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

Nothing happened David with this code. I hope you got what I needed – the nav items About, Privacy, Terms, Coffee Blog and Contact links at the bottom right of screen. This are not aligned properly on mobile.

[David]

Where did you add the CSS?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

In the customize>css

[Tom]

Can you disable any caching/minifying plugins so we can inspect your code? Right now it doesn’t seem like the code David provided is applying to the element.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Amit]

I am so sorry for being late…You can check now

[David]

It looks to be working now – try clearing your browser cache to see.

I have also updated the CSS here:

https://generatepress.com/forums/topic/how-to-align-mobile-footer-menu-to-center/#post-1433670

To make a little more ‘specific’ which should overcome any issues the Cache is causing.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

I still see the footer bar items as right aligned – https://paste.pics/efb54e76eb8cdf677dd4f215275b8371

[Leo]

Try this CSS as well:

@media (max-width: 768px) {
    .footer-bar .widget_nav_menu li:first-child {
        margin-left: 10px;
    }
    .footer-bar .widget_nav_menu li:last-child {
        margin-right: 10px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Amit]

Hey Leo, this one worked up. I tweaked it a little as since the code was working dynamically –

@media (max-width: 768px) {
    .footer-bar .widget_nav_menu li:last-child {
        margin-right: 8%;
    }
}

[Leo]

Glad to hear 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts