Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

In the custom WP Menu I have assigned classes which are different for each menu item. For example

.power-icon a {
    padding-left: 35px !important;
    background-image: url(/images/icon-grey.png);
    background-position:  5% 50% ;
    background-repeat: no-repeat;
 }

.power-icon a:hover {
    padding-left: 35px !important;
    background-image: url(/images/icon-blue.png);
    background-position:  5% 50% ;
    background-repeat: no-repeat;
 }

This works fine, however, I would like to make the blue icon also display when the page is active/current.

I discovered that this

      .widget_nav_menu .menu .current-menu-item {
             background-color: #f3f3f3;

      }

will highlight the current item background. But my attempts to unify it with the icon class have failed. Appreciate any help on this. Thanks.

share|improve this question

closed as off-topic by Pieter Goosen, TheDeadMedic, birgire, gmazzap, Rarst Jun 13 '14 at 10:51

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Your question should be specific to WordPress. Generic PHP/JS/HTML/CSS questions might be better asked at Stack Overflow or another appropriate site of the Stack Exchange network. Third party plugins and themes are off topic." – Pieter Goosen, TheDeadMedic, birgire, gmazzap, Rarst
If this question can be reworded to fit the rules in the help center, please edit the question.

    
CSS questions are off topic here and should be better asked on stackoverflow –  Pieter Goosen Jun 13 '14 at 4:27
    
Sorry Pieter, first timer here. –  Steve Jun 13 '14 at 9:58

1 Answer 1

up vote 0 down vote accepted

This isn't really WordPress specific, but here goes.

Really, all you're missing is applying the blue background image on .current-menu-item a.

/* Default state base */
.widget_nav_menu .menu li a{
  padding-left: 35px !important;
  background-position: 5% 50%;
  background-repeat: no-repeat;
}

/* Active state base */
.widget_nav_menu .menu .current-menu-item a,
.widget_nav_menu .menu .current-menu-item a,
.widget_nav_menu .menu .current-menu-parent a,
.widget_nav_menu .menu .current-menu-ancestor a {
  background-color: #f3f3f3;
}

/* Power */
.power-icon a {
  background-image: url( /images/icon-grey.png );
}

/* Power active + hover */
.power-icon a:hover,
.power-icon.current-menu-item a,
.power-icon.current-menu-parent a,
.power-icon.current-menu-ancestor a {
  background-image: url( /images/icon-blue.png );
}
share|improve this answer
    
Thank you Joey for your time. That works perfect, and I can now see the logic of it. Cheers. Steve –  Steve Jun 13 '14 at 10:00

Not the answer you're looking for? Browse other questions tagged or ask your own question.