working on mobile lang selector

Makefile

@@ -31,4 +31,4 @@ docker_up:
 
 generate_pot:
 	wp i18n make-pot kit kit/languages/kit.pot
-	# msgfmt -o generatedFile.mo yourFile.po
+	msgfmt -o kit/languages/de_DE.mo kit/languages/de_DE.po

kit/css/header.css

@@ -44,6 +44,7 @@ header .header-logo-container {
   color: #333333;
   line-height: 1;
   flex-grow: 0;
+  order: 1;
 }
 
 header .header-logo-container::after {
@@ -51,11 +52,13 @@ header .header-logo-container::after {
 }
 
 header .header-button-container {
+  order: 4;
   margin-left: 3.33333rem;
 }
 
 header nav {
   flex-grow: 1;
+  order: 3;
 }
 
 header:not(.sticky-header) nav {
@@ -137,6 +140,33 @@ header:not(.sticky-header) .header-button-container {
   z-index: 1;
 }
 
+.header-lang-small {
+  display: flex;
+  flex-direction: row;
+  order: 2;
+  margin-left: 2rem;
+  display: none;
+}
+
+.header-lang-small span:hover {
+  color: red;
+}
+
+.header-lang-small li:not(.active) {
+  display: none;
+}
+
+.header-lang-small li.active {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: hidden;
+  max-width: 2.1ch;
+  font-weight: 500;
+  color: #333333;
+  margin-right: 5px;
+  text-transform: uppercase;
+}
+
 .header-lang {
   position: absolute;
   top: 5px;
@@ -150,7 +180,7 @@ header:not(.sticky-header) .header-button-container {
   border-left: 1px solid #333333;
   line-height: 1;
   display: inline;
-  padding: 0 8px;
+  padding: 0 5px 0 8px;
 }
 
 .header-lang li:first-child {
@@ -158,7 +188,6 @@ header:not(.sticky-header) .header-button-container {
 }
 
 .header-lang li span {
-
   line-height: 1rem;
   transition: color .3s;
 }
@@ -229,17 +258,27 @@ header:not(.sticky-header) .header-button-container {
     display: block;
     margin-top: 4.44444rem;
   }
+
+  header .header-logo-container {
+    flex-grow: 1;
+  }
+
+  .header-lang-small {
+    display: flex;
+    order: 3;
+  }
+
   .header-lang {
-    position: static;
+    display: none;
-    padding: 0.72222rem 0;
-    margin-right: 10px;
-    font-size: 18px;
-  }
-  .header-lang li {
-    line-height: initial;
   }
+
   .header-search {
     display: block;
+    order: 2;
+  }
+
+  .header-button-container {
+    order: 4;
   }
 }
 

kit/functions.php

@@ -157,6 +157,10 @@ function kit_customize_css()
                color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
              }
 
+             .header-lang-small:hover{
+               color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
+             }
+
              nav > ul > li:hover > a::after,
              nav > ul > li:active > a::after {
                border-bottom: 4px solid <?php echo get_theme_mod('theme_color', '#009982'); ?>;

kit/header.php

@@ -99,7 +99,16 @@
            wpm_language_switcher ('list','name');
          };
         ?>
-    </div>
+      </div>
+
+      <div class="header-lang-small">
+        <?php
+         if ( function_exists ( 'wpm_language_switcher' ) ) {
+           wpm_language_switcher ('list','name');
+         };
+        ?>
+        <img src="<?php bloginfo('stylesheet_directory');?>/img/ios-arrow-down.svg" width=20px height=20px></img>
+      </div>
 
       <h1 class="header-logo-container">
         <a href="<?php echo home_url(); ?>">

kit/img/ios-arrow-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 294.1L383 167c9.4-9.4 24.6-9.4 33.9 0s9.3 24.6 0 34L273 345c-9.1 9.1-23.7 9.3-33.1.7L95 201.1c-4.7-4.7-7-10.9-7-17s2.3-12.3 7-17c9.4-9.4 24.6-9.4 33.9 0l127.1 127z"/></svg>

kit/img/ios-arrow-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 217.9L383 345c9.4 9.4 24.6 9.4 33.9 0 9.4-9.4 9.3-24.6 0-34L273 167c-9.1-9.1-23.7-9.3-33.1-.7L95 310.9c-4.7 4.7-7 10.9-7 17s2.3 12.3 7 17c9.4 9.4 24.6 9.4 33.9 0l127.1-127z"/></svg>