Create a system to translate the whole website

I have a WordPress website I want to translate manually. I have tried all the different translation plugins but they all suck, either they translate wrong or they destroy the design.

The first problem:

enter image description here

I have this header and can’t edit it using WordPress, so I need to edit it manually using JavaScript. The problem here is I need to change the href address to the page of the selected language and the span below to the text of the chosen language, this is a problem because even if I know what language the user has selected I can’t know what words to type in the span below the href. Second, if we say that the span media production has submenus how can I make the system take care of them also?

The second problem:
I need the whole website to be connected, for example, if I choose to translate from English to Swedish then I need to go to another page I need the other page to be the translated version, not the main version, plus the manual translation of the Header. this is problematic for many reasons one of them is, what will happen if they open Google and find the translated version of the page instead of the main one, then I will not be able to translate the header because I can’t have any global variables when they first go in the website, so if they directly press on to another page from the translated one then they will go back to English, and I want them to stay on Swedish if they are in Swedish.

I don’t know where to start on this, appreciate all ideas.

Note! The translated page will be manually changed with the WordPress editor the problem is in the header because my theme won’t allow me to edit this but it allows me to edit the nav, and the other problem is the connection between the translated pages.