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, G. M., Rarst Jun 13 at 10:51

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

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 at 4:27
    
Sorry Pieter, first timer here. –  Steve Jun 13 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 at 10:00

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