Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #20392

    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

    #107473

    Any help would be appreciated fellas. I don’t mind going the google route, but I like to begin with forums, as they are usually quicker responses and more accurate.

    #107474

    Hi 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

    #107475

    Thanks Devin! Sorry for the late response. I wasn’t even aware you replied because I forgot to rss.

    I will try this and update this post with the result.

    -Pat

    #107476

    Good luck :)

    #107477

    Well 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 ;-)

    #107478

    Hi,

    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 &nbsp ; 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

    #107479

    Oh man Nick, I just saw this. Going to go through these steps tonight my friend! Thank you. Will update shortly.

    -Pat

    #107480

    Hopefully Nicks code helps, its definitely above and beyond what we typically are able to do :)

    #107481

    Hello Devin, yes it is! I am going to give it a shot now, . . . been busy, but I think this would be a sweet hack! I’ve only seen it applied a few times. Just icons with no text.

    Will update shortly.

    #107482

    If 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

    #107483

    Thanks Devin. I’ve actually been taking Treehouse Learning course on HTML and CSS. I know basics, but I want to master! :-) Again, thanks for the suggestion.

    #107484

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

    #107485

    Hi!

    Glad that Nick and Devin could help you :)

    Best regards,

    Peter

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Replace nav menu itmes with icons’ is closed to new replies.