Grow your CSS skills. Land your dream job.

Problems with Menu Sprites (WordPress)

  • # April 1, 2013 at 4:50 pm

    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

    # April 1, 2013 at 5:30 pm

    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

    # April 1, 2013 at 5:51 pm

    Ah. You figured it out! I copied a portion of this from a tutorial for Thematic WordPress themes and my theme is NOT on the Thematic framework. That .custom is a left-over artifact from my copy/paste. I wasn’t paying attention. Thank you @jmacaluso!

    # April 1, 2013 at 6:31 pm

    As is often the case, I spoke prematurely.

    @jmacaluso I did as you suggested:


    .nav .menu-item a {
    display:block;
    height:40px;
    width:115px;
    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');
    }
    .menu-item-6 a {
    background-position: 0 0;
    }
    .menu-item-10 a {
    background-position: -130px 0;
    }
    .menu-item-13 a {
    background-position: -260px 0px;
    }
    .menu-item-6 a:hover {
    background-position: 0 -43px;
    }
    .menu-item-10 a:hover {
    background-position: -130px -43px;
    }
    .menu-item-13 a:hover {
    background-position: -260px -43px;
    }

    However, if you resize the window so that the menu drop-down icon appears, and then click on said icon, you’ll see that the image is repeated for every single li item.

    I was under the impression that I could do something like this:

    .menu-item-6 ul > li > a {background-image: url(images/something.jpg);}

    and only address the top level li. Seems that’s not the case. Any further suggestions?

    # April 1, 2013 at 8:13 pm

    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;
    # April 1, 2013 at 8:41 pm

    @jmacaluso, thanks man! Can’t believe I didn’t think to do that. I was looking at it the wrong way!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".