CODEWITHSUNDEEP
csswordpress
black_belt
black_belt

Reputation: 6799

Highlighting the font color of menu item of current page in Wordpress

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?

Upvotes: 1

Views: 3615

Answers (1)

Jace
Jace

Reputation: 3072

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

Upvotes: 1

Related Questions