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:
    https://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="https://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('https://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.

    Thread Starter Helen-kh

    (@helen-kh)

    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.