I would like to try replacing the navigation elements with icons instead of text. This may be outside the scope of basic support and if so, I will do the footwork to find it.
Any ideas?
Thank you,
-Pat
Replace nav menu itmes with icons
14 posts from 4 voices- Started 3 months ago by headbentdesign
- Latest reply from Dude
- This topic is closed
- This topic is not a support question
-
Devin
ModeratorHi Pat,
A couple ways you could do it. Both are a bit of hacks, but they will allow you to do it quickly.
The first is to inspect your menu items using either the source of your site (view source in any browser) or using Chrome/Safari/Firefox to Inspect element. The goal is to get the menu id for each menu item. Then you can use that id to add a background image to each item and hide the text with some css.
The other way would be to try and use the menus manager. I think this will work, though I only remember seeing it in a post somewhere on a wordpress forum; the idea is to just put the html for the icons into the label for each menu item.
Either way, you'll need to add a good bit of css to the custom.css file in the css folder of your theme files.
Regards,
Devin
Posted 3 months ago # -
headbentdesign
MemberWell Devin, I feel silly. I'm still green in some areas.
I tried every combination I can think of, read every article I could find on the subject, and I can't make it happen.
I've tried putting the hack code in a few places, with no results. Tried putting it inside style tags in the header, in the custom css section, and inside the css class section in the menu window. Hahah! Yeah I know, don't laugh. What am I doing wrong sir?
Here's the code I'm using.
#menu-item-243 { text-indent: -99999px; background: url ('http://mynewsite.headbentdesign.com/wp-content/uploads/2013/01/home_icon.png') no-repeat; }Also, do I need to hide the text for this to work?
Thanks for your patience Devin. Taking Treehouse courses on HTML and CSS so I can be a real developer ;-)
Posted 2 months ago # -
Nick
ModeratorHi,
Please take a look here. You need to check those boxes. That menu is in a pannel triggered by the Screen Options button on the Menu page, and as you see one of the checkboxes is for CSS Classes. http://www.clipular.com/c?2236702=NbhgJjm6zmltYHt_Xx67Azc6IGo
Now we are gonna give every image a different class, not an id. http://www.clipular.com/c?2239581=6FveAkGn87l2lqu6sQDKqxMN1Xs
So the first one lets say is nav-sample_page and then nav-privacy_policy etc...After looking at the page in Chrome Developer Tools we can see how the css will be structured http://www.clipular.com/c?2236714=9C3K-C34DzI9hVQiGR4LWCNqayw (chrome developer tools refuse to be photographed i guess)
The css with the first image may be this if you were to put the images into that folder, which i advise against since it will be overwritten during any theme update. Just upload them to media and change the url /wp-content/uploads/.....also use your domain as well please.
#menu-item-15.nav-sample_page { background: url('/wp-content/themes/eunoia/images/layout/nav-sample_page.png') no-repeat scroll center rgba(165, 54, 54, 0); }i used this code below
#menu-item-15.nav-sample_page { background: url('http://www.fayerweather.org/alumni/wp-content/themes/fss/images/alumni/facebook_button_small.png') no-repeat scroll center rgba(114, 231, 236, 0.38); }to get this image. now we got the image, and as you can see we even have a bit of background color with .38 transparency. but we also got the label , and that's gotta go.
http://www.clipular.com/c?2249465=ObtzRVd9JHU-NC03zj2_BrxYLaQ
Now here we gotta be careful, because Google is one of those sensitive, suspicious souls who may decide we are practicing blackhat seo if we use some wild technique to disappear the text menu link. Also to keep in mind is that an image in css can not have alt or title fields thus in a perfect world it would have a span element hinting to google what the purpose of this image (the new menu button) is.
But there is a problem. we need to change the css so that the image appears within the href while the above code makes it come out in the div which wraps the href so we will modify the code by adding 'a' and also changing the line height and width (you should do same to match size of your image menu links:
#menu-item-15.nav-sample_page a { background: url('http://www.fayerweather.org/alumni/wp-content/themes/fss/images/alumni/facebook_button_small.png') no-repeat scroll center rgba(114, 231, 236, 0); line-height: 2.7em; width: 1.05em; }http://www.clipular.com/c?2243584=sNDH2nI5BOuLiKsZ5coqaFOq8iQ .. and thats the current result. Now the entire light green area is a hyper link and we no longer need that text link at all.
Now I went into Wordpress Menu page and i added the code for the no-break-space , unfortunately i can't write it because it's invisible but it looks like & n b s p ; without the spaces. After you save the menu, lol, this is how it will look http://www.clipular.com/c?2245536=DrRcUA5DhEEV9FFNxM_5jLdr-TQ notice the second menu item on the bottom I added also has   ; as the 'navigation label' so in essense your menu will be hard to deal with from the admin side since you won't know what each field is unless you open it.
But the page itself looks fine
Here I added a rollover (hover effect) with a different facebook image
#menu-item-15.nav-sample_page a { background: url('http://www.fayerweather.org/alumni/wp-content/themes/fss/images/alumni/facebook_button_small.png') no-repeat scroll center rgba(114, 231, 236, 0); line-height: 2.7em; width: 1.05em; } #menu-item-15.nav-sample_page a:hover { background: url('http://www.jdmcomputing.co.uk/common/facebook.jpg') no-repeat scroll center rgba(114, 231, 236, 0); line-height: 2.7em; width: 1.05em; }https://docs.google.com/file/d/0B8hqGBMSfHtKMFdRWE9SR0VnV0E/edit?usp=sharing
a little video before i added the hover.Thanks,
Nick
Posted 2 months ago # -
Devin
ModeratorIf you have any questions on basic html techniques while doing so, this is a good resource to get quick answers: http://www.w3schools.com/
Regards,
Devin
Posted 2 months ago # -
headbentdesign
MemberOk, Nick, BOOM! It's done. Thank you VERY much for the help. Your directions were spot on and very comprehensive, even for a rookie like myself. You have given me hope in regards to the existence of good support. Nearly gone. Thanks guys. You have earned a customer for life. Tell Kriesti I said he should consider giving you guys a raise. :-)
Final result of nav menu :
http://imageplay.net/img/tya22308932/main_nav_icons.png
Well, nothing's final, but close. lol
Posted 2 months ago #
Topic Closed
This topic has been closed to new replies.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
