Every menu item in WordPress has a unique ID and they can be styled with background images if you want. You just need to find the id to style the items with CSS using background-images.
Finding the id with Google Chrome browser
If you have the Google Chrome Browser go to your page and right click on the thing you want to know the id of, then select Inspect Element from the menu. After that, a screen will pop up down the bottom of your browser. Select Elements if it isn’t already on that tab.
Finding the id with the Firefox browser
Right click on the object you want to find the id of, then click on Inspect Element from the menu. A screen should open at the bottom of the browser. Make sure it is on the HTML tab if it is not. Just by moving your mouse over lines of code, you can see which lines make the parts of the page.
Just the page source
Of course you can also just look at the page source (HTML code) in almost any browser, if you want to, but I like being able to mouse over things and get the highlighted boxes ;)
After you have the id you just need to add some lines of CSS to edit the menu. Here are some examples:
CSS Example 1:
ID-of-the-thing-here { background-image: url(/images/foo.gif) }
CSS Example 2:
ID-here { background-image: url(http://a4jp.com/images/icons/home2.png); other-bits-of-code-here-if-you-want–delete-this-if-you-do-not-use-it;}
* I usually use GIF, JPG or PNG files.
** GIF or JPG files work the best if you want your images to display on older mobile devices properly. For some reason the transparent part of PNG files becomes black on my 1st Generation iPod and older versions of Internet Explorer.
Glen Rowell
a4jp.com
Loving the write-up… Cheers! Supporting the article… With thanks.
I really appreciate you writing this post. I have been looking all over for this type of info! Thank goodness I found it. You’ve made my day! Thanks again
I just want to say I am new to weblogs but I truly savored this web page. I bookmarked it and will come back many times. Bless you for revealing your web page.
This blog was… how do I say it? Relevant! Finally I found something which helped me.
Thanks a lot!
It’s the best time to make some plans for the future and it is time to be happy. I have read this post and if I could I wish to suggest you few interesting things or tips. Perhaps you could write next articles referring to this article. I wish to read more things about it!