The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

[resolved] Adding Images to Navigation Bar (10 posts)

  1. kristygardner
    Posted 3 years ago #

    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: http://fallinginstyle.net/

  2. paulwpxp
    Font hero
    Posted 3 years ago #

    Try this (take out what you have first).

    #nav > div > ul > li {
    	background: url("http://fallinginstyle.net/wp-content/uploads/2013/07/Triangle.jpg") 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.

  3. kristygardner
    Posted 3 years ago #

    Hi Paul,

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

  4. kristygardner
    Posted 3 years ago #

    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.

  5. kristygardner
    Posted 3 years ago #

    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!

  6. paulwpxp
    Font hero
    Posted 3 years ago #

    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;
  7. kristygardner
    Posted 3 years ago #

    You just made. my. day.

    Thank you thank you thank you!!!

    Have a great Monday!


  8. paulwpxp
    Font hero
    Posted 3 years ago #

    The same to you, have a good Monday!

  9. Lucida
    Posted 3 years ago #


    I am trying to use the same technique on the WordPress website I am developing (www.womenslandarmy.co.uk/wordpress) using this image for the navigation... http://www.womenslandarmy.co.uk/wordpress/wp-content/uploads/2013/08/Womens-Land-Army-Badge-Grey-white-40-pixels.jpg.

    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


  10. kristygardner
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic