[Resolved] center menu displayed in footer

Home Forums Support center menu displayed in footer

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #101071
    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!

    #101120
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Give this CSS a try:

    .footer-widgets .widget_nav_menu li {
        float: left;
        margin-right: 10px;
    }
    #101232
    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!

    #101266
    Tom
    Lead Developer
    Lead Developer

    Ah, try replacing it with this:

    .footer-widgets .widget_nav_menu li {
        float: left;
        margin-right: 10px;
        text-align: center;
    }
    #101276
    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

    #101277
    Tom
    Lead Developer
    Lead Developer

    Let’s try this instead:

    .footer-widgets .menu {
        text-align: center;
    }
    
    .footer-widgets .widget_nav_menu li {
        display: inline-block;
        margin-right: 10px;
    }
    #101304
    John MacKenzie

    that’s the ticket! thanks!

    #101306
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.