Re: WordPress – Menu images instead of text

[chrisburton]

This is an old post but I’m doing the same. Using two different custom menu’s (Main and Secondary), I used a sprite and applied a background-position to each.

Image

Code:

#main {float: left;} #secondary {float: right;}

#main li {margin-right: 50px;} #secondary li {margin-left: 50px;}

#main li, #secondary li {display: inline; line-height: 80px;}



#main li a, #secondary li a {

display: inline-block;

height: 10px;

background-image: url('/wordpress/wp-content/uploads/sprite.png');

background-repeat: none;

text-indent: -9999px;

line-height: 0;

}



/* Normal Menu */

#menu-item-45 a {width: 46px; background-position: 0 0;} /* About */

#menu-item-19 a {width:74px; background-position: -46px 0;} /* Portfolio */

#menu-item-211 a {width: 69px; background-position: -120px 0;} /* Projects */

#menu-item-27 a {width:43px; background-position: -189px 0;} /* Store */



/* Hover Menu */

#menu-item-45 a:hover {background-position: 0 -10px;} /* About */

#menu-item-19 a:hover {background-position: -46px -10px;} /* Portfolio */

#menu-item-211 a:hover {background-position: -120px -10px;} /* Projects */

#menu-item-27 a:hover {background-position: -189px -10px;} /* Store */



.logo {

float: left;

width:341px;

height:79px;

background: url('/wordpress/wp-content/uploads/sprite.png') 0 -19px no-repeat;

margin: 0 auto;

text-indent: -9999px;

}