Support » Themes and Templates » display footer menu links inline

  • Resolved befree22


    The footer links on the footer menu I created are aligned vertically on this site. How do I display them horizontally? I thought they displayed horizontally by default.

    I tried the following css code but I’m getting nowhere:

    .menu li { display: inline; } and

    #footer ul { list-style-type: none; text-align:center; }
    #footer li { display:inline; padding: 0 10px; }


    #bottom-menu li { display: inline; }
    FYI: I’m using a 2012 child theme and I was able to add the footer menu in WP admin.

Viewing 15 replies - 1 through 15 (of 19 total)
  • Moderator Andrew Nevins


    Forum moderator

    Consider CSS-specific forums for CSS-specific issues.

    There is no footer id on that page – so that CSS won’t work. There IS a footer tag, but that’s not the same…

    Try removing the hashtag and see if that works.

    You also have quite a few serious mark-up errors on that page, so you might want to clean some of those up as some can cause problems:

    I’ll looking into the validation errors.

    Still, I tried this code but no luck yet:

    #menu-footer-menu ul { list-style-type: none; text-align:center; }
    #menu-footer-menu li { display:inline; padding: 0 10px; }

    That’s still incorrect CSS selectors. Try this:

    ul#menu-footer-menu li {
       display: inline;

    You’ll need to add padding to space them out.

    I added the above code plus padding: 0 10px;

    Still not aligning horizontally. I’m surprised that the links aren’t horizontal by default. I want to avoid messing with .php files but I may have to, huh?

    FYI: I’m switching to that other theme until I’m able to work on the 2012 child theme.

    No, it has nothing to do with PHP. The code I posted worked fine in Firebug, so it’s likely you had a syntax error. Where are you putting your CSS?

    Now you’ve changed themes? If you want to keep the other theme and want help with it, it’s not helpful to switch it…

    The 2012 child theme I’m using has a custom css feature in Appearance > Theme Options page in WP admin. I’ve pasted all of my own css in this location. Here is the custom css in pastebin:

    So where is the site live? I only see the Grunge Blue theme.

    The site is live.

    Okay, you have a CSS syntax error in the custom CSS here:

    border-radius: 7px 7px 0 0;
    }   border-top: none; 
    /* Start Header Logo */

    See the closing bracket is in the wrong place — it should be one line lower AFTER the border-top: none; and as a result none of the rest of your custom CSS is working at all…

    See what happens when you fix that.

    Nothing yet. Current custom css in admin:

    More errors in there — you really should be doing this yourself:
    Missing a closing bracket between these lines:

    border-bottom: 2px solid #ffffff;

    same here:

    width: 73%;
    /* Sidebar -----*/

    I think there’s something wrong with the way the theme or even webhost updates the site. I have a header-logo.php that I added over 24 hours ago and only now is the blank/empty header space appearing at the top of the page (b4 there was no space between the social media icons and the top navigation menu).

    That said, I think your css code for the footer links works (you said it works in Firefox) but I wonder when it will be recognized by the theme.

    I added the closing bracket before the .archive-title class but it keeps being removed whenever I save the custom css script in WP admin. I’ve been experiencing this since yesterday.

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘display footer menu links inline’ is closed to new replies.