WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. efpeterson
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  3. efpeterson
    Member
    Posted 1 year 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
    Volunteer Moderator
    Posted 1 year ago #

    No way to help without seeing the site live.

  5. efpeterson
    Member
    Posted 1 year ago #

    tp://tinyurl.com/aoaaxaj

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  7. efpeterson
    Member
    Posted 1 year ago #

    Should be all set now. Sorry about that.

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

    They are images.

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

    This topic has been resolved!

  15. WPyogi
    Volunteer Moderator
    Posted 1 year 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