WordPress.org

Ready to get started?Download WordPress

Forums

How to replace menu links with an image (3 posts)

  1. joujoumylove
    Member
    Posted 2 years ago #

    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:
    http://joujoumylove.com/

  2. Max
    Member
    Posted 2 years ago #

    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.

  3. joujoumylove
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic