WordPress.org

Forums

[resolved] List Style Images on WP Custom Menu Widget (15 posts)

  1. efpeterson
    Member
    Posted 2 years ago #

    Hi folks,
    I have a question about List Style Images. I created a site that uses the "Custom Menu" widget in the sidebar and the image I'm using for the bullet is 30px. It's quite a bit larger than the text that is being displayed next to it as the link for the page and the text displays at the bottom of the image. Is there anyway to correct it so that the text falls is aligned in the center of the image. Currently the sidebar list has different CSS than the rest of the lists in my site. Here is the CSS for this particular piece so far. Nothing extensive:

    #menu-right-nav-menu.menu {padding-left:30px;}
    ul#menu-right-nav-menu.menu {list-style-image: url('images/bullet.png');}
  2. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    This query may be better asked in a CSS-specific forum like CSS-Creator.

  3. efpeterson
    Member
    Posted 2 years ago #

    It's been on CSS-Creator for 2 days with no response. Just wanted to know if anyone here could help me out.

  4. WPyogi
    Forum Moderator
    Posted 2 years ago #

    No way to help without seeing the site live.

  5. efpeterson
    Member
    Posted 2 years ago #

    tp://tinyurl.com/aoaaxaj

  6. WPyogi
    Forum Moderator
    Posted 2 years ago #

    You have an "under construction" page up...

  7. efpeterson
    Member
    Posted 2 years ago #

    Should be all set now. Sorry about that.

  8. WPyogi
    Forum Moderator
    Posted 2 years ago #

    It looks like the bullets are not loading? Or are those the images you are using? Firebug shows "failed to load the URL" in the CSS -- hence my question.

  9. efpeterson
    Member
    Posted 2 years ago #

    They are images.

  10. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Okay, I drove myself crazy trying to sort this and finally, I think this does it:

    ul#menu-right-nav-menu.menu li a {
        vertical-align: top;
    }
  11. efpeterson
    Member
    Posted 2 years ago #

    Fantastic. I had the syntax of the CSS mixed up. I put:

    li#menu-right-nav-menu.menu a {

    So suppose I wanted to put a border on the bottom of the items to act as a horizontal divider I would use:

    ul#menu-right-nav-menu.menu li {border-bottom:thin #000;} ?

  12. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Yep, although "thin" isn't valid CSS. Try 1px solid #000; You may need to add some padding too, depending on the spacing.

  13. efpeterson
    Member
    Posted 2 years ago #

    Got it! Looks much better now. Thanks so much for your help. I was starting to pull my hair out over it.

  14. efpeterson
    Member
    Posted 2 years ago #

    This topic has been resolved!

  15. WPyogi
    Forum Moderator
    Posted 2 years ago #

    Lists can be pretty tricky and cranky...you're welcome. Firebug is the best way to wrestle with CSS...

Topic Closed

This topic has been closed to new replies.

About this Topic