header fixe

web/themes/custom/eql/css-compiled/styles.css

@@ -260,7 +260,6 @@ a {
 
 .layout--onecol .field--type-link {
   grid-area: 8 / span 9;
-  grid-row: 0;
   justify-self: end;
   position: relative;
   top: -200%;
@@ -387,8 +386,9 @@ a {
   position: relative; }
 
 header {
-  display: block;
+  width: 100%;
-  position: sticky; }
+  position: fixed;
+  z-index: 99; }
 
 #header-top {
   height: 7rem;
@@ -398,7 +398,6 @@ header {
   flex-direction: row;
   justify-content: space-between;
   color: black;
-  position: sticky;
   top: 0%; }
   #header-top .region-header-top-left {
     display: flex;

web/themes/custom/eql/scss/pages/_home.scss

@@ -37,7 +37,7 @@
             color: $white;
             line-height: 1.5rem;
             padding: 0.5rem;
-            div:first-child{                // block actu dans le bandeau
+            div:first-child{           // block actu dans le bandeau
                 display: flex;
                 flex-direction: column;
                 :nth-child(1) { order: 1; } 
@@ -74,12 +74,9 @@
     }      
     .field--type-link {
         grid-area: 8 / span 9;
-        grid-row: 0;
         justify-self: end;
         position: relative;
         top: -200%;
-        // display: block;
-        // float: right;
         width: fit-content;
         height: fit-content;
         padding: 0.4rem 1rem;

web/themes/custom/eql/scss/partials/_header copy.scss

@@ -1,154 +0,0 @@
-
-.layout-container{
-    position: relative;
-}
-header{                       
-    display: block;
-    position: sticky;     // sticky marche pas :(
-
-}
-
-#header-top {
-    height: 7rem;
-    background-color: $white;
-    box-shadow: 1px 0px 8px $black;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    color: $black;
-    position: sticky;
-    top:0%;
-
-
-    .region-header-top-left {                // logo + menu déroulant
-        display:flex;
-        flex-direction: row;
-        padding: 1rem;
-        align-items:start;  
-        color: $black;  
-        font-weight: 800;
-
-        #block-logogouv{
-            display: flex;
-            height: 100%;
-            align-items: center;
-        }
-
-        ul{
-            // position: absolute;
-            list-style: none;
-            display: flex;
-            flex-direction: column;
-            li {
-                padding-right: 1rem;
-       
-                a {
-                    color: $black;
-                    // font-weight: 800;
-
-                }
-                .is-active {
-                    color: $blue-light;
-                }
-
-            } 
-            .ul2{
-                flex-direction: column;
-                display: none;
-            }
-            :hover{
-                color: $blue-light;
-            }
-        }
-
-        li:not(ul):not(.ul2){
-            display: block;
-            position: relative;
-        }
-
-        // .ul:not(:-moz-first-node){
-        //     display: none;
-        // }
-        :hover {
-            .ul2{
-                display: block;
-                background-color: $white;
-                padding: 1rem;
-            }
-        }
-        
-    }
-
-    li .ul1 {
-        display: flex;
-        flex-direction: column;
-
-    }
-
-
-    #block-burger {                         // menu burger à droite
-        z-index: 1;
-        background-color: $blue-light;
-        font-size: 0.7rem;
-        color: $white;
-        display: block;
-        width: 7rem;
-        height: 100%;
-        margin-top: 0;
-        :hover{
-            cursor: pointer;
-        }
-        h2{
-            padding-top: 1rem;
-        }
-        h2:after{
-            display: block;
-            margin:auto;
-            height: 60px;
-            content:url('data:image/svg+xml,<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path id="path930" d="M 30,10 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-3" d="M 30,25 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/><path id="path930-6" d="M 30,40 H 90" stroke-linecap="round" stroke="white" stroke-width="4"/></svg>');
-        }          
-
-        #block-burger-menu{
-            display: block;
-            margin: 0;
-            align-self: center;
-            text-align: center;
-            height:7rem;
-        }
-
-        .ul1:not(.sous-liste){
-            width: 300%;
-            position: relative;
-            right: 260px;
-            margin: 0;
-            padding-top: 2rem;
-            z-index: 99;
-
-        }
-        ul  {
-            display: none;
-            background-color: $blue-light;
-            line-height: 2rem;
-            list-style: none;
-        
-            .ul1 .sous-liste{
-                a{
-                    opacity: 1;
-                }
-            }
-            a{
-                opacity: 0.6;
-                color: $white;
-                font-weight: 800;
-                font-size: 1rem;
-            }
-        }
-        &.opened ul {
-          display: block;
-
-        }
-    }   
-
-
-}
-

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

@@ -3,8 +3,11 @@
     position: relative;
 }
 header{                       
-    display: block;
+    // display: block;
-    position: sticky;     // sticky marche pas :(
+    width: 100%;
+    position: fixed;
+    z-index: 99;
+
 
 }
 
@@ -16,7 +19,7 @@ header{
     flex-direction: row;
     justify-content: space-between;
     color: $black;
-    position: sticky;
+    // position: fixed;
     top:0%;