Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

1 Answer 1

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 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 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 Jun 24 '12 at 7:53

Your Answer

 
discard

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.