1

I am trying to highlight the current menu item in wordpress. I have tried the following code:

#menu-menu li.current-menu-item a { background-color:#d9707a; }
#menu-menu li.current_page_item a { background-color:#d9707a; }

The above code is working fine but what actually I am trying to do is highlight by changing the color, so I tried the following code but its not working

#menu-menu li.current-menu-item a { color:#d9707a; }
#menu-menu li.current_page_item a { color:#d9707a; }

Could you please tell me how to solve this problem?

dfsq
  • 191,768
  • 25
  • 236
  • 258
black_belt
  • 6,601
  • 36
  • 121
  • 185

1 Answers1

1

We don't know enough of your setup to know what the exact problem is. But it sounds to me that your color style might be being overwritten due to style specificity.

Either track down the style that is overwriting the color (using your browsers inspector) and change it there (but you need to confirm that it is safe to do so, as that style might be affecting other parts of your site) OR, the quick and dirty method of adding an !important tag to your styles.

Example:

#menu-menu li.current-menu-item a { color:#d9707a !important; }
#menu-menu li.current_page_item a { color:#d9707a !important; }

More info on style specificity:

What are the priorities among CSS selectors
Understanding CSS selectors

Community
  • 1
  • 1
Jace
  • 3,052
  • 2
  • 22
  • 33
  • Great! I'm glad I could have helped. Please don't forget to mark as answer if you feel it appropriate! – Jace Apr 01 '13 at 06:28
  • yes I tried to mark it as my accepted answer but stackoverflow said I have to wait for three more minutes :) Thanks again for your help :) – black_belt Apr 01 '13 at 06:31
  • I'm having the same problem with color even with !important. background-color works. – Sam Mar 29 '22 at 23:20