How to create icons instead titles in top menu

3 posts from 2 voices

• Started 10 months ago by michi2009
• Latest reply from Devin
• This topic is not resolved

Tags:

No tags yet.

1. 

   michi2009
   Member

   At first: I closed the two questions from yesterday as resolved, because I have to explain the problem again here in other way. Maybe it was a little bit confusing. I tried several ways to get icons in the top menu instead of the titles.

   Last trial: create a optional class in Appearance/Menu for each Menu item. So for example, for the „Home“-icon I created a class

   ' .icon-home-top { background: url (images/icons/iconbox/32-Home-2.png) background-position:left center; background-repeat:no-repeat;}'

   and give this class to the Home-Link in the menu/appearance as optional css-class .icon-home-top

   But it didn´t work.

   I reade many stuff and found, that I possibly have to define fixed menu-item-ids in function.php and give them in a further step further classes?

   Or if I can can existent classes, which are this? I tried ' .menu-menu_top .menu-item-100' for example for the home-link. Please let me know.
   http://heim.web-by-michi.de/home/
   I need this icons urgent, let me know if it´s possible to realize and which class I have to take.

   Best regards,
   michi

   Posted 10 months ago #
2. 

   michi2009
   Member

   Hello,
   please could somebody anwser to my question? I asked the first time before two days, and furthermore yesterday. I need the information, if it ´s possible to take the classes to style the menu, so that I can use icons instead of text-links. If it´s not so easy and need change in php-code (for example to define fix menu-items for example) please let me know. I need the answer as soon as possible. Thanks in advance, Michi

   Posted 10 months ago #
3. 

   Devin
   Moderator

   Hi michi2009,

   Each of your main menu items has an ID that you can use to target that it specifically. You can then do something like:
   

   #menu-item-341 {
   text-indent: -99999%;
   background: url(your icon url) no-repeat;
   }

   You'll need to use a tool like Firebug for Firefox or Chrome's Inspect Element to identify each of the menu ID's so that you can make the customization.

   In the future, please do not re-post the same question multiple times in new posts. It makes it harder to answer questions, keep track of answers and generally clogs things up for us.

   Regards,

   Devin

   Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.