WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. kristygardner
    Member
    Posted 1 year 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,

    Kristy

    URL is: http://fallinginstyle.net/

  2. paulwpxp
    Font hero
    Posted 1 year 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
    Member
    Posted 1 year ago #

    Hi Paul,

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

  4. kristygardner
    Member
    Posted 1 year 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
    Member
    Posted 1 year 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 1 year 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
    Member
    Posted 1 year ago #

    You just made. my. day.

    Thank you thank you thank you!!!

    Have a great Monday!

    Kristy

  8. paulwpxp
    Font hero
    Posted 1 year ago #

    The same to you, have a good Monday!

  9. Lucida
    Member
    Posted 1 year ago #

    Hello,

    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

    Lucida

  10. kristygardner
    Member
    Posted 11 months 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