To change the text color or background color of the currently active menu item in WordPress website, you can inspect the element of the menu item to identify the class that is added and then use CSS to modify the color.
WordPress menu text color/background color Setting
If your theme has the option to set the text color and background color of menu items, it is best to use the theme options (Customize) to change the color.
Menu text/background color Setting in Avada theme
In the Avada wordpress theme, you can change the menu color/background color by going to Avada > Menu > Main Menu and selecting the Main Menu Typography section.
Main Menu Font Hover/Active Color, Main Menu Dropdown Font Color, Main Menu Dropdown Font Size, etc. can also be set in this section.
In the “Main Menu” section, which is just above it, you can set the Main Menu Dropdown Background Color, the Main Menu Dropdown Background Hover Color, etc. for the background color.
And in Avada > Options > Header > Header Styling, you can set the header background color, etc.
Navigation color for GeneratePress theme
This blog uses the GeneratePress theme which allows you to customize the colors of various elements in the Colors section of Appearance > Customize.
There you can choose the background color of the primary navigation menu, the text color of the menu items, the background and text color of the submenu, and more.
If you want to use additional CSS code, you can add it to the Additional CSS section of Appearance > Customize > Additional CSS.
If the menu text color is not visible
If the text color and background color of a menu or drop-down menu item are the same, the item may not be visible. To fix this, try changing either the text color or the background color so that they are no longer the same.
For example, if the menu text color is white and the background color is set to white, then the menu items won’t appear. Changing one or both of these colors will make the menu items visible.