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

Read More
#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?

Related posts

Leave a Reply

1 comment

  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