Replace text with items in menu, twenty eleven theme

I don’t think that’s going to be possible using the currently generated classes at your disposal. You’d need to add something like an extra <span></span> around the link text – which you might be able to do via the before and after parameters in wp_nav_menu.

I tried this solutions from another forum:
https://www.ads-software.com/support/topic/replace-text-links-to-pages-with-images?replies=3

It’s simple but the image ends up in the middle of my header.

Also with this forum question:
https://www.ads-software.com/support/topic/twentyten-using-image-replacement-for-menu-div?replies=20

I was able to do this (so when I click on a menu (e.g. contact), it is replaced with an unclickable image, so surely it is possible?

Sorry I am just getting used to css. Thanks a lot for your time Esmi.

Once those span tags are in place, it’s possible. You apply a fix height & width to each of the menus li tags. Next add the custom images to each of the li elements as backgrounds using their unique ids. Finally, you pull the menu text off the page using something like:

#access .menu li a span {
display:inline-block;
position:absolute;
top:-9999px;
left:-9999px;
}

Which link were to talking about? do you mean the first one?

Any or all of them.

Sorry, i mean in the previous post. Were you meaning that I apply what’s in this:

https://www.ads-software.com/support/topic/replace-text-links-to-pages-with-images?replies=3

Then re-adjust the position of the images in the screen?

I didn’t post to that topic but if you want to try out the approach suggested in that topic, then go for it ??

Ahh I see, so you mean this link:
https://www.ads-software.com/support/topic/twentyten-using-image-replacement-for-menu-div?replies=20

So I add the image replacements into the style sheet first, then add them into #access li as background images. I’ll give it a go and let you know what happens. Thanks a lot for your help with it

Thanks for your help, but i’m at a loss at the moment. maybe after a bit more tweaking I might be able to do it. Thanks anyway, you kind of put it in perspective for me.

Hi Esmi,

I’m simply trying to add a span to the main nav links in the twentyeleven theme. This is just so i can add an icon for the home page link and leave the rest as text links. You briefly mention doing this in the 2nd comment above.

in the header.php page of the TWENTYTEN THEME the wp_nav_menu parameteres are as below(the span is already there for the a link);

<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’, ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’ ) ); ?>

….But in the TWENTYELEVEN THEME they are different and there is no span.

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>

to add a span should it be the same as the twentyten theme or is that too much code? and it should be something like this?

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘link_before’ => ‘<span>’, ‘link_after’ => ‘</span>’ ) ); ?>

once I have the span in place i can via css style and hide whatver elements I need to, its just getting the span in there without any other knock on effects site wide.

Any help with this appreciated.thanks
p

Rather late I know but I had the same requirement starting last week and after several days searching and experimenting I think I have found a way to do it without too much coding (which is fortunate because I am a beginner in CSS etc).

I found this site
https://diythemes.com/thesis/rtfm/replace-wp-menu-text-links-image-sprites/
and the instructions work!

by hovering over the dashboard-appearance-menu “edit menu item” arrow I can see the relevant menu id. The code to be entered for each item (630 in the pasted code below) into the twenty eleven child style file, depending on image width and height, is

‘#menu-item-630 a {
display:block; height:83px; width:100px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url(‘https://localhost:19542/wp-content/uploads/2013/01/impossible-ring-home-e1358164715469.jpg&#8217;); background-position:0 0;
}’

it needs the full address of the image or the image doesn’t show.

Also, it doesn’t seem to need the custom links to be activated when you edit the menu. It works anyway. Ho Hum.

next job is to improve the hover and adjust the search position…

GL