WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am creating my custom navigation menu with background-images. The menu items have a title from the Page, and that title is displayed above my background image, which is not what I want because the image itself already contains the link text.

/* menu items */
function nav_menu_items($classes, $item) {
     $classes[] = "item-". $item->attr_title; 
     return $classes;
add_filter('nav_menu_css_class', 'nav_menu_items', 10,2);

.item-myitem a {
background: url(someimage);
text-decoration: none;
width: 20px;

However in the HTML it is displayed as (background-image is OK)

<a title="myitem" href="someurl">Next Post</a>

How do I remove that "Next Post"?

share|improve this question
up vote 0 down vote accepted

You can do that with CSS text-indent: text-indent:-9000px;. That way your text is still there for accessibility.

share|improve this answer
Not working :(. – Hajder Rabiee Jun 21 '12 at 8:55
@hajder maybe post what you tried, show an example? i'm not going to guess what your mistake may have been. – Milo Jun 21 '12 at 13:46
I did what you suggested. Here's an image <img src="postimage.org/image/p2a7k2xf7/">; . It is not very visible in the screenshot, but there's an image behind "Truppen", you can also see that in the CSS editor. – Hajder Rabiee Jun 22 '12 at 6:53
@hajder If the a element is inline, you need to make it block or inline-block for text-indent to effect it - jsfiddle.net/tXZpK. – Milo Jun 22 '12 at 14:03
thanks, that solved it! – Hajder Rabiee Jun 24 '12 at 7:53

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.