Support » Theme: Suffusion » Adding Images to Navigation Bar

  • Resolved kristygardner


    Hello all!

    I’d like to add a little pink dot between each menu item in the nav bar so it would go:

    Item *IMAGE* Item *IMAGE* Item etc…

    You get the idea. I’ve been Googling it for hours. Any help would be greatly appreciated. I’ve managed to get them into the nav bar via the theme navigation item options but can’t seem to figure out how to move them so they’re actually between the items.

    Thanks in advance,


    URL is:

Viewing 9 replies - 1 through 9 (of 9 total)
  • paulwpxp


    Font hero

    Try this (take out what you have first).

    #nav > div > ul > li {
    	background: url("") no-repeat scroll right 14px transparent;
    	padding-right: 20px;

    Since this theme offers many option on layout settings, this might or might not work in all situations.

    Hi Paul,

    I’m sorry but nothing happened. Any other advice? I’ve removed what I had there previously.

    Lies! It works!!! Thank you thank you thank you!

    Is there any way to center them a little more so they don’t hang down quite so far?

    Also, is it possible to remove the one on the end? I’d like to just have them between the items, not on the end.

    I’ve figured out how to move the images up. I just added

    padding-bottom: 20px;

    below “padding-right: 20px;”

    But I still need to know how to omit the image at the end. Thanks again! You’re awesome!



    Font hero

    Seems like you’ve got it centered with that paddding already.

    To omit the last one, just put this below it.

    #nav > div > ul > li:last-child {
    	background: none;

    You just made. my. day.

    Thank you thank you thank you!!!

    Have a great Monday!




    Font hero

    The same to you, have a good Monday!


    I am trying to use the same technique on the WordPress website I am developing ( using this image for the navigation…

    I am a ‘newbie’ to WordPress and wondered exactly what text in the coding I need to take out and replace it with?

    Many Thanks




    Not sure if you’re still looking Lucida but you need to upload your image to WP media and then click “edit” for that specific image. From here you can copy/paste the image URL (will be in a box on the right hand side) and replace the URL with the one I have in the code above.

    You may need to play with the padding px (right now you’ll see it’s 20) so it fits in your bar properly.

    Hope this helps!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Adding Images to Navigation Bar’ is closed to new replies.