From fdb670d227073e996a662fc3525aacc560d408a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A1kon=20Hjaltal=C3=ADn?= <hakon.hjaltalin@hagstofa.is>
Date: Tue, 12 Mar 2024 16:03:01 +0000
Subject: [PATCH] header mobile

---
 _includes/header-en.html |  6 +++---
 _includes/header-is.html |  6 +++---
 _includes/header.html    |  1 +
 _sass/custom.scss        | 37 +++++++++++++++++++++++++++++++++++++
 4 files changed, 44 insertions(+), 6 deletions(-)

diff --git a/_includes/header-en.html b/_includes/header-en.html
index 1b050316a4c..e2982a246de 100644
--- a/_includes/header-en.html
+++ b/_includes/header-en.html
@@ -1,15 +1,15 @@
 <header class="hagstofa">
     <div class="container">
         <div class="row">
-            <div class="brand col-md-3">
+            <div class="brand col-6 col-lg-4">
                 <a href="https://hagstofa.is/">
                     <img src="{{ site.baseurl }}/assets/img/header_brand_en.svg" alt="Hagstofa Íslands" />
                 </a>
             </div>
-            <div class="header-text col-md-6">
+            <div id="main-text" class="header-text col-4">
                 Sustainable Development Goals
             </div>
-            <div class="header-language col-md-3">
+            <div class="header-language col-6 col-lg-4">
                 <div class="upper-desktop-navbar">
                     <a id="link-button-language" class="link-button" href="{{ site.baseurl }}/">
                         <i class="picon-tungumal"></i>
diff --git a/_includes/header-is.html b/_includes/header-is.html
index f57f45d43e4..02281af0990 100644
--- a/_includes/header-is.html
+++ b/_includes/header-is.html
@@ -1,15 +1,15 @@
 <header class="hagstofa">
     <div class="container">
         <div class="row">
-            <div class="brand col-md-4">
+            <div class="brand col-6 col-lg-4">
                 <a href="https://hagstofa.is/">
                     <img src="{{ site.baseurl }}/assets/img/header_brand_is.svg" alt="Hagstofa Íslands" />
                 </a>
             </div>
-            <div class="header-text col-md-4">
+            <div id="main-text" class="header-text col-4">
                 Heimsmarkmiðin
             </div>
-            <div class="header-language col-md-4">
+            <div class="header-language col-6 col-lg-4">
                 <div class="upper-desktop-navbar">
                     <a id="link-button-language" class="link-button" href="{{ site.baseurl }}/en/">
                         <i class="picon-tungumal"></i>
diff --git a/_includes/header.html b/_includes/header.html
index 7200c9de9d8..ee31334f444 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -15,6 +15,7 @@
 
 <div class="container">
     <nav class="navbar navbar-expand-lg navbar-light flex-wrap align-items-start">
+        <div id="mobile-main-text">{%- if page.language == "en" -%}Sustainable Development Goals{%- else -%}Heimsmarkmiðin{%- endif -%}</div>
         {% include components/header/logo.html %}
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ page.t.header.show_menu }}">
             <span class="navbar-toggler-icon"></span>
diff --git a/_sass/custom.scss b/_sass/custom.scss
index d8dea6f2b5a..ba0c318e17c 100644
--- a/_sass/custom.scss
+++ b/_sass/custom.scss
@@ -317,10 +317,47 @@ footer.hagstofa {
   }
 }
 
+#main-text {
+  display: none;
+}
+
+#mobile-main-text {
+  font-family: adelle-sans, sans-serif;
+  font-weight: 600;
+  font-size: 24px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #0B404E;
+  padding-bottom: 4px;
+  width: 100%;
+}
+
+#mobile-main-text::after {
+  display: table;
+  content: " ";
+  clear: both;
+}
+
 @media (min-width: 1500px) {
   footer.hagstofa {
     .container {
       width: auto !important;
     }
   }
+}
+
+@media (min-width: 992px) {
+  #main-text {
+    display: block;
+  }
+
+  #mobile-main-text {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 992px) {
+  .header-search-bar {
+      width: 100% !important;
+  }
 }
\ No newline at end of file