Archived topic

center menu displayed in footer

7 replies · Started by John MacKenzie on April 21, 2015

Viewing posts 1–8 of 8

April 21, 2015 at 4:56 pm #101071

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!

April 21, 2015 at 10:38 pm #101120

Hi there,

Give this CSS a try:

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

April 22, 2015 at 6:12 am #101232

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!

April 22, 2015 at 7:56 am #101266

Ah, try replacing it with this:

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

April 22, 2015 at 8:53 am #101276

Hi tom thanks for your reply,

i had tried that as well before replying, it didn't give me any love either. :(

John

April 22, 2015 at 9:08 am #101277

Let's try this instead:

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

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

April 22, 2015 at 10:20 am #101304

that's the ticket! thanks!

April 22, 2015 at 10:56 am #101306

You're welcome! :)

This archived topic is closed to new replies.

Start building better websites today.