image as tab title in custom menu for autofocus

  • Unknown's avatar
    tbrittneym · Member ·

    Hi all,

    I’ve seen a few responses to things like this, but am not exactly clear how it will work on my page.

    I am trying to include images instead of words for the tab titles in a custom menu. I’d like to use this section as how to contact me and would like to use little Facebook and Twitter icons instead of writing it out.

    Please me know! Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    I am trying to include images instead of words for the tab titles in a custom menu.

    First, you should upload the image(s) you’d like to use to your media library and copy the image URLs.

    If you want to use the same background image for every menu item and also keep the text, add this to your Appearance → Custom Design → CSS page:

    #access .menu li > a {
display: block;
background: url(YOUR_IMAGE_URL) no-repeat;
width: YOUR_IMAGE_WIDTH;
height: YOUR_IMAGE_HEIGHT;
line-height: YOUR_IMAGE_HEIGHT;
text-align: center;
float: left;
padding: 0 5px 0 0;
}

    Or if you want to replace each menu item with a different image for each menu item, you can target each one specifically. To do it, you need to look at the page source to find what selector to use for each item. For example, the About menu item has an ID of “menu-item-742” and so you could use this to replace the About link with an image in the menu. In this example, the text is hidden and just an image is used for the button:

    #menu-item-742 a {
display: block;
background: url(YOUR_IMAGE_URL) no-repeat;
width: YOUR_IMAGE_WIDTH;
height: YOUR_IMAGE_HEIGHT;
text-indent: -9999px;
float: left;
padding: 0 5px 0 0;
}

    Replace YOUR_IMAGE_URL with the image URL(s) of the image(s) you uploaded to your media library. Replace YOUR_IMAGE_WIDTH and YOUR_IMAGE_HEIGHT with your image width and height.

    For reference, your current menu items have the following IDs:

    About – menu-item-742
    Print – menu-item-498
    Video – menu-item-499
    Design – menu-item-534

  • The topic ‘image as tab title in custom menu for autofocus’ is closed to new replies.