WordPress.org

Support

Support » Themes and Templates » [Resolved] Adding Images to Navigation Bar

[Resolved] Adding Images to Navigation Bar

  • kristygardner
    Member

    @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,

    Kristy

    URL is: http://fallinginstyle.net/

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

    @paulwp

    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.

    kristygardner
    Member

    @kristygardner

    Hi Paul,

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

    kristygardner
    Member

    @kristygardner

    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.

    kristygardner
    Member

    @kristygardner

    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!

    paulwpxp
    Font hero

    @paulwp

    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;
    }
    kristygardner
    Member

    @kristygardner

    You just made. my. day.

    Thank you thank you thank you!!!

    Have a great Monday!

    Kristy

    paulwpxp
    Font hero

    @paulwp

    The same to you, have a good Monday!

    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

    kristygardner
    Member

    @kristygardner

    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 ‘[Resolved] Adding Images to Navigation Bar’ is closed to new replies.