position menu déroulants

web/themes/custom/reha/css/reha.css

@@ -157,7 +157,7 @@ header {
   header div {
     display: inline-grid;
     align-items: center;
-    grid-template-columns: 210px, 210px, repeat(6, 1fr) 210px, 210px; }
+    grid-template-columns: repeat(10, 1fr); }
     header div #block-reha-logoministere {
       grid-column: 1;
       width: fit-content;
@@ -185,21 +185,21 @@ header {
           content: url(../images/noun-contact-2495375.svg);
           padding-right: 1rem; }
       header div #block-reha-connexionutilisateur .connexion {
-        float: right;
         height: 0;
         /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
         width: 100%;
         position: relative; }
         header div #block-reha-connexionutilisateur .connexion .connexion-full {
           display: none;
+          right: -235px;
+          top: 36px;
+          position: absolute;
           background-color: white;
-          width: 400px;
+          width: 30vw;
           height: 100vh;
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           clip-path: inset(0px -10px -10px -10px);
-          padding: 5% 10% 5% 5%;
-          position: relative;
-          right: -150px; }
+          padding: 5% 10% 5% 5%; }
     header div #block-reha-config-pages {
       grid-column: 10;
       display: flex;
@@ -217,7 +217,10 @@ header {
         header div #block-reha-config-pages .config_pages--contact--full .field--type-text-long {
           display: none;
           background-color: white;
-          width: 400px;
+          position: absolute;
+          right: 0px;
+          top: 100%;
+          width: 30vw;
           height: 100vh;
           box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
           clip-path: inset(0px -10px -10px -10px); }

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

@@ -17,7 +17,7 @@ header{
     div{
         display: inline-grid;
         align-items: center;
-        grid-template-columns: 210px, 210px, repeat(6, 1fr) 210px, 210px;
+        grid-template-columns: repeat(10, 1fr) ;
 
         #block-reha-logoministere{
             grid-column: 1;
@@ -45,7 +45,6 @@ header{
             grid-column: 9;
             .bouton-connexion{
                 padding-right: 3rem;
-
                 :before{
                     content: url(../images/noun-contact-2495375.svg);
                     padding-right: 1rem;
@@ -55,20 +54,24 @@ header{
             flex-direction: column;
             height: fit-content;
             .connexion{
-                float: right;
+                // float: right;
                 height: 0; /* Hauteur initiale à 0 pour créer l'effet de glissement vers le bas */
                 width: 100%;
                 position: relative;
                 .connexion-full{
                     display: none;
+                    right:-235px;
+                    top: 36px;  // Positionnez-les sous les boutons
+                    // right: 0;   // Ou ajustez selon vos besoins
+                    position: absolute;
                     background-color: $white;
-                    width: 400px;
+                    // width: 400px;
+                    width: 30vw;
+
                     height: 100vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
                     padding: 5% 10% 5% 5%;
-                    position: relative;
-                    right:-150px;
                 }
             }
 
@@ -93,7 +96,11 @@ header{
                 .field--type-text-long {
                     display: none;
                     background-color: $white;
-                    width: 400px;
+                    position: absolute;
+                    right:0px;
+                    top: 100%;
+                    // width: 500px;
+                    width: 30vw;
                     height: 100vh;
                     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
                     clip-path: inset(0px -10px -10px -10px);
@@ -122,3 +129,15 @@ header{
 
 
 
+// .config_pages--contact--full, .connexion-full {
+//     position: absolute;
+//     top: 100%;  // Positionnez-les sous les boutons
+//     right: 0;   // Ou ajustez selon vos besoins
+//     display: none;  // Assurez-vous qu'ils ne sont pas visibles par défaut
+//     // ... (autres styles)
+//   }
+  
+//   #block-reha-connexionutilisateur:hover .connexion-full,
+//   #block-reha-config-pages:hover .config_pages--contact--full {
+//     display: block;  // Affichez-les lorsqu'ils sont survolés
+//   }