header responsive

web/themes/custom/popsu_colloque/css/components/header/header.scss

@@ -1,6 +1,7 @@
 header{
-  padding: 0 3rem;
-  height: 130px;
+  padding: 0;
+  height: 100px;
+  // display: none;
   div {
     height: inherit;
   }
@@ -9,35 +10,154 @@ header{
 #block-popsu-colloque-branding{
   width: 100%;
   position: relative;
-  z-index: 999;
+  // z-index: 999;
   padding:0;
+  @media screen and (min-width: 992px) {
+    padding:0 1rem;
+  }
+  &.is-active{
+    z-index: 10000;
+  }
   & > div {
+    display: flex;
+    padding:1rem 0.5rem;
     & > a{
       display: inline-block;
       position: relative;
       img{
-        width: 100%;
+        width: auto;
         height: 100%;
         object-fit: contain;
+        @media screen and (min-width: 768px) {
+          width: 100%;
+        }
       }
     }
   }
 }
-#block-mainnavigation{
+
+#block-renderedsitesettingsblock-2{
   width: auto;
   border-left: 1px solid $color1;
-  padding-bottom: 1rem;
-  display: flex;
-  align-items: flex-end;
-  ul{
-    flex-wrap: nowrap;
-    li{
-      padding: 0 1rem;
-      &:not(:last-child){
-        border-right: 1px solid $col_black;
+  padding: 0;
+  display: none;
+  min-width: 520px;
+  @media screen and (min-width: 768px) {
+    display: block;
+  }
+  .site_setting_entity{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 1rem;
+    h1{
+      max-width: 100%;
+      color: $color2;
+      padding-right: 1rem;
+      text-transform: uppercase;
+      text-align: right;
+      align-self: stretch;
+      margin: auto 0;
+      width: 100%;
+
+    }
+    .__info_colloque{
+      width: 100%;
+      align-self: stretch;
+      margin: auto 0;
+      height: 7vw;
+      height: auto;
+      &>div{
+        &:first-child{
+          white-space: nowrap;
+          border-bottom: 2px solid $color1;
+        }
       }
-      a{
-        white-space: nowrap;
+    }
+  }
+}
+
+#block-mainnavigation{
+  width: 100%;
+  border-left: 1px solid $color1;
+  padding: 0rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  @media screen and (min-width: 1200px) {
+    min-width: auto;
+    padding: 2rem;
+  }
+  .burger{
+    display: block;
+    @media screen and (min-width: 1200px) {
+      display: none;
+    }
+    &.is-active{
+      z-index: 999;
+    }
+  }
+  .nav-main{
+    display: none;
+    height: auto;
+    @media screen and (min-width: 1200px) {
+      display: flex;
+    }
+    @media screen and (max-width: 1200px) {
+      &.is-active{
+        display: block;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: white;
+        z-index: 999;
+        ul{
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          height: 100%;
+          align-items: center;
+          li{
+            width: 100%;
+            font-size: 2rem;
+            line-height: 3rem;
+            display: inline-flex;
+            align-items: center;
+            padding: 0 5%;
+            &::before{
+              display: block;
+              content: " ";
+              width: 0%;
+              transition: width 1s ease;
+              height: 1px;
+              background: $color1;
+            }
+            &:hover{
+              &::before{
+                width: 10%;
+                transition: all 1s ease;
+              }
+            }
+            a{
+              min-width: max-content;
+              margin: 0 1rem;
+            }
+          }
+        }
+      }
+    }
+    ul{
+      flex-wrap: nowrap;
+      li{
+        padding: 0 0.5rem;
+        &:not(:last-child){
+          border-right: 1px solid $col_black;
+        }
+        a{
+          white-space: nowrap;
+        }
       }
     }
   }