header mobile

hagstofan · Mar 12, 2024 · fdb670d · fdb670d
1 parent 5fab618
commit fdb670d
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
+  }
 }