WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] display footer menu links inline (20 posts)

  1. befree22
    Member
    Posted 1 year ago #

    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; }
    and

    #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.

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Consider CSS-specific forums for CSS-specific issues.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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:

    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.denisejacksonmusic.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

  5. befree22
    Member
    Posted 1 year ago #

    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; }
  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  7. befree22
    Member
    Posted 1 year ago #

    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.

  8. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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...

  9. befree22
    Member
    Posted 1 year ago #

    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: http://pastebin.com/NdrS0dE1

  10. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  11. befree22
    Member
    Posted 1 year ago #

    The site is live.

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  13. befree22
    Member
    Posted 1 year ago #

    Nothing yet. Current custom css in admin: http://pastebin.com/rXdc0zx1

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

    border-bottom: 2px solid #ffffff;
    
      .archive-title,

    same here:

    width: 73%;
    
    /* Sidebar -----*/
  15. befree22
    Member
    Posted 1 year ago #

    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.

  16. befree22
    Member
    Posted 1 year ago #

    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.

  17. befree22
    Member
    Posted 1 year ago #

    It works! God, I love you!

  18. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No, that's likely because as you are now fixing those CSS errors, your custom CSS is only now working -- almost none of it was working before because of the errors above it in the file...

    And there's still another error -- the reason they keep "appearing" is that when you have an error, it invalidates everything below it - -so the validator does not see later errors:

    .widget-area .widget a {
      color: 1c6ba0;
    }

    no hash tag...

  19. befree22
    Member
    Posted 1 year ago #

    Thanks!

  20. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Just saw you latest post -- LOL! It IS indeed satisfying when it all works :).

    But now, seriously, you still have a lot of mark-up errors on that page -- see above and you'd really be well advised to at least clear up the ones likely to cause problems -- extra, missing, stray or out of place tags are not good. And Google does not like invalid code, so that's another reason to validate and get it fixed...

Topic Closed

This topic has been closed to new replies.

About this Topic