diff --git a/sass/_language_selector.scss b/sass/_language_selector.scss
index 8eb816f3..5d6168c5 100644
--- a/sass/_language_selector.scss
+++ b/sass/_language_selector.scss
@@ -23,43 +23,42 @@ $baseBgColor: black;
   color: red;
 }
 
-.menu {
+.lang-menu {
   display: none;
   // It's a list, so remove list padding (where bullets are usually drawn).
   padding: 0;
   list-style: none;
 
-  &__item {
-    // Stretch/shrink all menu items proportionally.
-    flex: 1 1 auto;
-    margin-left: 20px;
+  &-item {
+    margin-left: 1em;
 
     &:first-child {
       margin-left: 0;
     }
   }
 
-  &__link {
+  &-link {
     @include MenuItemsTextStyling;
 
     text-decoration: none;
   }
 }
 
-input.menu_trigger {
+input.lang-menu-trigger {
   // Hide input checkbox, label is used for touch events instead.
   position: absolute;
   clip: rect(0, 0, 0, 0);
 
   // Show menu on checkbox click.
-  &:checked ~ .menu {
+  &:checked ~ .lang-menu {
     // Turn flexbox ul again into a block and reset it's properties.
-    display: block;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     z-index: 999;
 
-    .menu__item {
+    .lang-menu-item {
       text-align: center;
-      margin: 1em;
     }
   }
 
@@ -69,6 +68,6 @@ input.menu_trigger {
 }
 
 // Menu button
-label[for="menu_trigger"] {
+label[for="lang-menu-trigger"] {
   @include MenuItemsTextStyling;
 }
diff --git a/templates/language_selector.html b/templates/language_selector.html
index a2ec1cb1..0552a6d7 100644
--- a/templates/language_selector.html
+++ b/templates/language_selector.html
@@ -6,16 +6,16 @@
     }
   </script>
   <!-- Hidden checkbox is used for pure CSS toggle menu. -->
-  <input type="checkbox" id="menu_trigger" class="menu_trigger" />
-  <label class="no-print" for="menu_trigger">
+  <input type="checkbox" id="lang-menu-trigger" class="lang-menu-trigger" />
+  <label class="no-print" for="lang-menu-trigger">
      🌐 {{ lang | upper }}
   </label>
 
-  <ul class="menu no-print" role="navigation">
-    {% for translation in resource.translations %}
+  <ul class="lang-menu no-print" role="navigation">
+    {% for translation in resource.translations | sort(attribute="lang") %}
     {% if lang != translation.lang %}
-    <li class="menu__item" role="menuitem">
-      <a class="menu__link" onclick="return onLanguageClick('{{translation.lang}}');" href="{{ translation.permalink }}">
+    <li class="lang-menu-item" role="menuitem">
+      <a class="lang-menu-link" onclick="return onLanguageClick('{{ translation.lang }}');" href="{{ translation.permalink }}">
         {{ trans(key="language", lang=translation.lang) }}
       </a>
     </li>