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?
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:
More info on style specificity:
What are the priorities among CSS selectors
Understanding CSS selectors