using images instead of menu items (3 posts)

  1. Helen-kh
    Posted 4 years ago #

    I am creating my own theme on WP. I want to use images for my menu items instead of text. Does anybody knows how to use the dynamic menu items as it comes in this code (<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>) but use an image for the items instead of text. To make it more clear what I want, please check this site:
    http://www.lilliruthrosenberg.com - each menu item is just an image.

    I also want each page in admin panel to have a title (such as home, contact,...), but not showing on the site, in fact gets replaced with the image for that menu item.

    Thanks for you help in advance :)

  2. Caroline Moore
    Posted 4 years ago #

    Each menu item has a unique CSS ID, like in the following example:

    <li id="menu-item-765"><a href="http://menu.item/url/">Some Menu Item</a></li>

    Create your menu and look at the page source to find your menu ID's. You can set a background image to the menu item and hide the text using CSS. Using the above example:

    li#menu-item-765 a {
      display: block;
      background-repeat: no-repeat;
      width: 100px;
      height: 50px;
      text-indent: -9000px;

    Set the width and height properties to the size of your image. The text-indent property hides the menu link text off screen, and the background-image property displays the image instead.

    Repeat for each menu item.

  3. Helen-kh
    Posted 4 years ago #

    Thanks so much :)
    It works!

Topic Closed

This topic has been closed to new replies.

About this Topic