The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Highlight current page using CSS image sprite

  • # July 5, 2013 at 8:16 am

    I am using triple image sprite: top – link, middle – hover, and bottom – highlight current in my main nav, but it doesn’t work for highlight current. My code is:




    .wrapLinks ul li {
    list-style: none;

    .wrapLinks ul li a {
    background-repeat: no-repeat;

    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-repeat: no-repeat;

    background-repeat: no-repeat;
    a.button {

    a.button:hover {
    background-position: center;

    a.button:active {
    background-position: bottom;
    transform: translateY(3px);

    Everything works fine except:

    #1 a#home.button, #2 a#products.button, #3 a#sell.button, #4 a#about.button, #5 a#contact.button{
    background-position: bottom;

    The background is not moving to the bottom position.

    I am new to all this so any help would be appreciated.

# July 5, 2013 at 9:38 am

ids arent supposed to be numbers right? I blow at reverse enginering other poeples code. I tried but it would take me 20 minutes to break it down. Here… I very logically coded a 4 part sprite here and very logically highlighting a current nav here The principal will be the same. Just change the color change to your corridnent change instead.

# July 5, 2013 at 9:40 am

>ids arent supposed to be numbers right?

Correct not supposed to start with numbers…or classes AFAIK.

# July 5, 2013 at 10:51 am

Thank you for quick answers! I didn’t know that ids shouldn’t be numbers…

I will modify my code.

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed