I am trying to setup the menu on the X Agency theme so that when the menu item is not selected it stays the default grey. When visitor hovers over the item i want it to change the text to red along with the shadow line which is currently blue. Then when item is selected and the visitor is on that page I would like the current item to remain red. Then when item has a submenu I would like the sub options to be capital letters and bold like the main menu. The sub menu item should be grey and turn red when its hovered over. Then when the visitor visits the sub menu page I need the parent menu item text stays red along with the sub menu.
Now the above needs to be for both the desktop and mobile.
Can you please provide me the CSS code required to accomplish this. I have been banging my head against the wall for hours.