WordPress.org

Support

Support » Themes and Templates » using images instead of menu items

using images instead of menu items

  • 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 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • 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-image:url('http://url.to/yourbackgroundimage.jpg');
      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.

    Thanks so much 🙂
    It works!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘using images instead of menu items’ is closed to new replies.
Skip to toolbar