1. The “x” sign is a close button for the mobile Hamburger menu so it has to be there.
From what I can see, you have a problem with the Font Awesome fonts and that is why you have squares after the menu items instead of the arrows.https://prnt.sc/snl8dc
To fix that, try the next:
Go to the Customizing-> General-> Extra menu and make sure “FontAwesome” is enabled. https://prnt.sc/npohpw
If it is enabled, and you still have the problem, insert the next code into
font-family: FontAwesome !important;
After that, you should have the arrows.
2. If you need to change the font size for the submenu on the mobile view, the next code should work for you: