WordPress; .current-menu-item to show hover state of image link

3 Views

So I have a nav bar that’s using images instead of text, one image for it’s normal state and another for it’s hover state.

In wordpress you can affect the menu item of the page you’re currently on with the built in .current-menu-item class, this works nicely for text, but I can’t seem to get it to work for images.

Read More

When on a particular page, I’d like the associated menu item to show the image that’s used in the hover state.

Here’s the link: http://ericbrockmanwebsites.com/dev4/ and here’s the code at a glance.

CSS (I will be using a sprite once I get further in with production): 

 #access {
    display:block;
    float:left;
    margin:30px 0;
    padding:0;
    list-style:none;
  }

 #access li {
    display:block;
    float:left;
    margin:0 5px;
    padding:0;
    list-style:none;
  }

  #access .home a {
    display: block;
    background-image: url(images/nav-btn-home.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .home a:hover, #access .home .current-menu-item {
    display: block;
    background-image: url(images/nav-btn-home-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .music a {
    display: block;
    background-image: url(images/nav-btn-music.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

  #access .music a:hover,   #access .music a:active {
    display: block;
    background-image: url(images/nav-btn-music-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
  }

Markup (using the WP built in custom menus): 

<nav id="access">
    <?php wp_nav_menu( array( 'theme_location' => 'main-nav' ) ); ?>
</nav> <!-- access -->

Advise or links to good articles that address the issue are much appreciated!

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. It looks like you’re trying to select the li that contains both the home and the current-menu-item classes. Your selector will choose any items with the current-menu-item that are children of an item with the home class.

    This should work for you, however:

    #access .home a:hover, #access .home.current-menu-item > a {
    display: block;
    background-image: url(images/nav-btn-home-hover.png);
    background-repeat: no-repeat;
    width: 164px;
    height: 164px;
    text-indent: -9000px;
}

    Notice there is no space between .home and .current-menu-item. This selector will choose any element that has both of those classes.

    Also note, it looked like the image named nav-btn-home-hover.png didn’t exist (or at least for some reason it wouldn’t load in my inspector).

    Have fun!