images instead of text in the navigation menu tabs

  • I am using the Suffusion template (I don’t know if that matters) and I would like to use an image on each tab for the navigation instead of text. The site I am working on has the images I would like to use across the top: https://mykidlist.com and I have set up the navigation menu but don’t know how to use images instead of text for each tab here: https://mykidlist.com/blog. Can anyone help me? I have been searching for information for hours and cannot find anything that really applies or makes sense for this situation.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)

  • You will need to tweak the CSS quite a bit, especially for the items with sub-menus, but this should give you a start.

    I think Suffusion has a place to add custom CSS, so try adding this:

    #nav ul li#menu-item-59 a {
   opacity: 0;
   width: 111px;
   height: 100px;
}
#nav ul li#menu-item-59 {
   background-image: url("https://www.mykidlist.com/blog/wp-content/uploads/2012/04/creativity_icon.png");
   width: 111px;
   height: 100px;
   background-color: transparent;
}

    You will need to examine the source code of the page to get the unique menu-item number for each entry.

    I’m trying to do the same thing, but am not sure where to place certain code. My URL is https://test.worryfreeclaims.com. Here’s what my navbar looks like on the stylesheet:

    [CSS moderated – a link to your site is enough]

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘images instead of text in the navigation menu tabs’ is closed to new replies.