Adding Images to Navigation Bar

Try this (take out what you have first).

#nav > div > ul > li {
	background: url("https://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.

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!

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!

Kristy

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… https://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

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!