[resolved] remove text from menu, use images instead (5 posts)

  1. joshshal
    Posted 6 years ago #

    I'm a beginner. I want to use only images for my menu links instead of the text that is there by default. So far I've had the images added but can't figure out how to remove the text. Thanks for your help!

  2. equaldesign
    Posted 6 years ago #

    Find which part of your CSS is styling the text. If this is a list of pages like a navbar then it will probably be some sort of list looking something like this in your css:

    #navbar ul li

    Add the following to it to send the text off the screen:

    #navbar ul li {
      text-indent: -9999px;
  3. joshshal
    Posted 6 years ago #

    Thanks for the reply. I'm using the ComicPress Theme; I'm not sure if that makes a difference.
    When I went to the Style.css sheet, I found this:

    #menunav a {
    width: 25px;
    height: 25px;
    display: block;
    float: left;
    color: #fff;
    font-size: 19px;
    font-weight: bold;
    line-height: 25px;
    text-align: center;
    border-left: 1px solid #fff;

    When I added the text-indent instruction nothing happened. I also tried changing the font size to 0 and deleting the line of code for font size. Not sure if I'm even editing the right page.

  4. equaldesign
    Posted 6 years ago #

    Try adding the negative text indent to

    #menu li a

  5. alojz
    Posted 6 years ago #

    Thanks for it. It`s really functional.
    But if you want use it, be sure, that you insert the text-indent: -9999px; in right place. (e.g. in my template I inserted it into .page_item {...} :-)

Topic Closed

This topic has been closed to new replies.

About this Topic