CSS for adding a extra header menu

I would like to place another menu above the current main menu at the right top of the website. The main menu is currenlty used for avigation. But i want to add another one above this main menu to use for a multilingual website ( so this menu will include links to the other languages website).

With the design of Purpose, this isn't something that we can do cleanly and we would end up having to limit the change to only certain screen/window widths.

What about adding them to the navigation menu and then we can move those menu items to the left? This is just a rough idea, which moves your "contact" menu item to the far left and the code needs some more tweaking, but let me know if you think this will work for you and we can then proceed with the final code.

Richard's (very clever!) idea was to pull out your language menu items and move them to the far left. If you put the CSS he provided earlier into your Customizer you can get an idea of what he means, using your Contact link as a stand-in for your language menu items, which you haven't added yet. It should look something like this:

Ah okay i get the idea, thank you for showing me the screenshot! I have no idea if it's possible but could we also use icons instead of text for linking the other language website. By this is mean for example an icon of the Spanish flag which will link the visitor to the Spanish version of our site.

Thank you all for helping me out, i added a custom link to the menu called "ES". I would like to move that link all the way to the left of the menu line. and ideally change the text ES into the icon of a spanish flag. I already uploaded the icon to my mediafile, its called: "Icon - Spain.png".

Could you please tell me which CSS coding i need to insert to get the result?
Thank you in advance!