Pin Language Switcher to Header

Hi!

(Q1) I currently have a language switching option at the top right of my website (English | Deutsch) and I would like to stylize it further. Right now it just floats at the top right of the page, but i would like to permanently fix this to the header to be inline with the shop icon. How can I do this? 

(Q2) I would also like to make it look nicer. For example a toggle button that just says EN and DE. See the attachment as an example.

(Q3) How can I make this toggle or button optimized for mobile? For example can I have it floating on the bottom left corner in a sticky position, or add it to the hamburger menu?

Can someone help me with this please? Maybe @tuanphan Thank you 🙂

Here is the Footer Script for the current setup: 

<script>
/*setup language switcher*/
$('body').prepend('<div class="language"><a href="/en/home" class="lang-en">English</a> | <a href="/de/home/" class="lang-de">Deutsch</a></div>');
</script>

Here is the CSS for the current setup:

.language {
  color: #994469;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 99999;
  a {
    color: #994469;
    &:hover {
      opacity: 0.8;
    }
  }
}
 

Thank you Joan! I played around with it and I think it looks great now. I appreciate your feedback and input.