investigation responsive

assets/css/partials/_site-header.scss

@@ -1,5 +1,7 @@
 #site-header {
 
+
+
   z-index: var(--z-header);
   --gap: 3ch;
 
@@ -42,10 +44,12 @@
 
     svg{
       width: 100px;
-      @media #{$small}{
-        width: 80px;
-      }
     }
+
+    @media #{$small}{
+        svg{ width: 80px; }
+        top: -4px;
+      }
   }
 
 
@@ -59,15 +63,39 @@
         justify-content: center;
          gap: var(--gap); 
            list-style-type: none;
+
+           li{
+            white-space: nowrap;
+           }
+
+
+       
                
       }
     }
+
+
     #nav-highlight ul{
          font-weight: 500;
         text-transform: uppercase;
+
+         @media #{$medium}{
+          font-size: var(--fs-small);
+
+        }
+        @media screen and (max-width: 890px){
+          justify-content: flex-end;
+          padding-right: 2ch;
+
+          li{ display: none; }
+          li.support{ display: block; }
+          
+        }
+
      
     }
 
+    
 
     #nav-investigation{
         position: absolute;
@@ -80,6 +108,41 @@
         transition: top 0.3s ease;
         pointer-events: none;
 
+
+          min-width: 0; 
+ 
+
+        
+        .title{ 
+          text-transform: uppercase;
+          font-size: var(--fs-small);
+          font-weight: 500;
+
+  
+          max-width: 100%;
+          min-width: 0; 
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          padding-left: 2ch;
+          padding-right: 2ch;
+          text-align: center;
+          color: var(--color-txt-light);
+     
+        }
+
+          @media #{$medium}{
+
+            ul{
+               font-size: var(--fs-small);
+              padding-left: 6ch;
+              padding-right: 6ch;
+            }
+         
+        }
+
+   
+
         li{ 
           color: var(--color-txt-light); 
           transition: color 0.3s ease;
@@ -95,22 +158,13 @@
               }
           }
         }
+
+        
     }  
 
 
 
-    &.has-nav-investigation{
-      #nav-highlight{
-        display: none;
-      }
-      #nav-investigation{
-        position: relative;
-        opacity: 1;
-      transform: translateY(0);
-      top: 0px;
-      pointer-events: auto;
-      }
-    }
+   
 
 
 
@@ -162,10 +216,73 @@
 
 
 
-@media #{$medium}{
-  #nav-highlight{
+
+// Animation, change header
+
+ #site-header.has-nav-investigation{
+    #nav-highlight{
+      display: none;
+    }
+    #nav-investigation{
+      position: relative;
+      opacity: 1;
+    transform: translateY(0);
+    top: 0px;
+    pointer-events: auto;
+    }
+  }
+
+
+@media #{$small-up}{
+
+  #site-header #nav-investigation .title{
     display: none;
   }
+
 }
 
 
+@media #{$small}{
+
+
+
+  #site-header #nav-highlight ul{
+        display: none;
+  }
+
+  #site-header #nav-investigation .title{
+      display: none;
+    }
+
+  #site-header.has-nav-investigation{
+    #nav-investigation{
+      ul{ display: none; }
+      .title{ display: block; }
+    }
+  }
+  
+}
+
+
+// @media #{$x-small}{
+//   #site-header.has-nav-investigation{
+//     #nav-investigation{
+//       .title{ display: none; }
+//     }
+//   }
+  
+
+// }
+
+
+
+//   @media #{$x-small}{
+// [data-template="investigation"] #site-header{
+
+//     #lang-toggle{ display: none; }
+//     #theme-toggle{ padding-right: 1ch; }
+//     #nav-investigation .title{
+//       font-size: var(--fs-xsmall);
+//     }
+//   }
+// }