Support » Themes and Templates » How to replace menu links with an image

  • Hi,
    I would like to replace the links on the top navigation menu with images I created for each of the navigation topics. Is this possible? what code should i change in css? This is for the oxygen template. Here is my site:

Viewing 2 replies - 1 through 2 (of 2 total)
  • You are probably best off creating an image sprite of all the overflow images you want, then you simply add them as backgrounds to either the list item elements or the anchors in the meny with appropriate offsets. Unfortunately we cannot give you specific CSS as we have no idea what your images look like, but I can give you some clues:

    In the backend, add a custom class to the image you want to replace, say “contact” for the contact menu, this will update the HTML that WordPress outputs to tag that li with a custom class called contact, you can then target that class with CSS as follows:

    .contact {
    text-indent: -999em;
    background: transparent url('images/menu-sprite.png") 0 0 no-repeat;

    The text-index bit hides the text out of the browser window – don’t use display:none as that breaks accessibility for some screen-readers, tempting as it is. Replace the URL bit with the path to your sprite, and fix the offsets to match the sprite location of your image in the sprite.

    im just not sure where to put this code. would i go in the stylesheet?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to replace menu links with an image’ is closed to new replies.