center menu displayed in footer

[John MacKenzie]

Hi Tom

I have a menu (custom menu) I have created and added into the footer widget using the custom menu widget (is that how you say it all?)

i want the links to be centered so that if i have say 7 links on 2 lines it would line up like this:

link link link link
link link link

demo site is password protected so cant post a link just yet?

i tried

@media screen and (min-width: 769px) {
        .footer-widget-1.grid-parent.grid-100 {
            text-align: center;
        }    

I also tried setting text-align center css on menu-menu-2 but no love there either.

thanks!

[Tom]

Hi there,

Give this CSS a try:

.footer-widgets .widget_nav_menu li {
    float: left;
    margin-right: 10px;
}

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

[John MacKenzie]

Hi Tom

thanks, well it looks better but didn’t center the last line (the first 2 lines seem to be centered maybe because they are full lines as opposed to just a couple on the last line. it looks better though so it might be good enough.

the text in the widget above the menu centers fine, its just the menu.

i can send you a screenshot if you want, but as it is now i think its acceptable unless you have another thought. sorry my example didnt display right in the post above lol! I can send you a pm with the site if you want or attach a screenshot. for reference this is the full css i have overriding footer things

@media screen and (min-width: 769px) {
        .footer-widget-1.grid-parent.grid-100 {
            width: 100% !important;
            padding-left: 20%;
            padding-right: 15%;
            text-align: center;
        }    

.footer-widgets .widget_nav_menu li { 
    float: left; 
    margin-right: 25px; 
} 

thanks a lot!

[Tom]

Ah, try replacing it with this:

.footer-widgets .widget_nav_menu li {
    float: left;
    margin-right: 10px;
    text-align: center;
}

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

[John MacKenzie]

Hi tom thanks for your reply,

i had tried that as well before replying, it didn’t give me any love either. 🙁

John

[Tom]

Let’s try this instead:

.footer-widgets .menu {
    text-align: center;
}

.footer-widgets .widget_nav_menu li {
    display: inline-block;
    margin-right: 10px;
}

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

[John MacKenzie]

that’s the ticket! thanks!

[Tom]

You’re welcome! 🙂

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

[Author]

Posts