js header

web/themes/custom/quartiers_de_demain/scss/partials/_header.scss

@@ -10,6 +10,7 @@ header{
     max-width: 100vw;
     position: -webkit-sticky;
     position: sticky;
+    position: relative;
     top: 0;
     border-bottom: 1px solid #808080;
     @media (max-width:800px) {
@@ -20,6 +21,7 @@ header{
         width: max-content;
     }
     
+    
 
      .header_left_container{
          grid-column: 1 /span 11;
@@ -60,12 +62,23 @@ header{
     }
 
     .header_nav_container{
-        display: grid;
+        display: none;
+        // display: grid;
         grid-template-columns: repeat(12, 1fr);
         grid-gap: 10px;
         grid-row: 3;
         grid-column: 1 /span 12;
+
+        position: absolute;
+        top: 100%; 
+        width: 100%;
+
         background: $bleu_fond_header;
+        border-bottom: 1px solid #808080;
+        border-top: 1px solid #808080;
+        font-size: $font-big;
+
+
 
         #block-quartiers-de-demain-entete{
             grid-column: 1 /span 11;
@@ -96,7 +109,7 @@ header{
     .close-block{
         order: 1;
         grid-column: 12;
-        display: grid;
+        display: none;
         margin: auto;
         span{
             transform-origin: center;