Problems with Menu Sprites (WordPress)

[tannercampbell]

Hey all,

http://50.87.81.92/

You’ll notice that the Contact menu item has a white background instead of showing the sprite I’ve created. I can’t figure out what’s causing that. I thought another element but there’s nothing there. Any ideas? Here’s my CSS:

#menu-item-6 a {
display:block; height:40px; width:127px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url(‘http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg’); background-position:0 0;
}
#menu-item-6 a:hover { background-position:0 -43px; }

#menu-item-10 a {
display:block; height:40px; width:127px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url(‘http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg’); background-position:-130px 0;
}

#menu-item-10 a:hover { background-position:-130px -43px; }

.custom #menu-item-13 a {
display:block; height:40px; width:127px; padding:0px; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url(‘http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg’); background-position:-260px 0;
}

#menu-item-13 a:hover { background-position:-260px -43px; }

Thanks!
Tanner

[jmacaluso]

Hi Tanner,

What is the .custom class doing there in front of #menu-item-13? don’t see it in your markup. so looks like there is no image on that #menu-item

you should set that background sprite and the height and width on the generic .nav .menu-item a
in that case you won’t have to keep repeating your styles.
then change the position based on the #menu-item

like this:

.nav .menu-item a {

display: block;

width: 127px;

height: 40px;

background: url('http://50.87.81.92/wp-content/uploads/2013/04/menu-sprite.jpg') no-repeat;

}

.menu-item-10 a {

background-position: -130px 0;

}

.menu-item-13 a {

background-position: -260px -43px;

}

etc.

hope this helps.

-John

[jmacaluso]

Ah.. I see. Didn’t take into account your child li’s. I guess the simplest thing to do is this:

.nav .sub-menu a {

background-image: none;

}

also make sure on your initial .menu-item to add:

background-repeat: none;

[Author]

Posts