refining css

resources/css/layout/menu-renovateur.css

@@ -38,7 +38,9 @@
   } */
 
   &__navlist {
-    @apply lg:flex 
+    @apply w-fit
+    mx-auto
+    lg:flex 
     justify-center
     /* relative */;
 
@@ -57,26 +59,20 @@
     }
     /* Generic Submenu Item */
     .sub-menu {
-      @apply fixed
-
-      z-50
-      top-0
+      @apply z-50
       left-0
       min-h-screen
       w-full 
       py-8
+      px-12
+      xl:px-0
+      fixed
       lg:absolute
+      top-[5.5rem]
+      lg:top-0
       lg:min-h-0
-      bottom-0
+      bottom-0;
 
-      /* lg:w-screen
-      lg:max-w-3xl */
-      /* -bottom-2 */;
-      /* background: white; */
-      /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
-      /* left: 0; */
-      /* width: 100%; */
-      /* margin: 0 calc(50% - 50vw); */
       isolation: isolate;
 
       &:after {
@@ -104,6 +100,10 @@
       }
       &--open {
         @apply block;
+        touch-action: none;
+        body {
+          overflow: hidden;
+        }
       }
     }
 
@@ -187,7 +187,7 @@
       transform: rotate(180deg);
     }
     &__submenu-close {
-      @apply absolute text-right top-8 right-0 w-fit h-auto rounded-full outline-offset-4;
+      @apply absolute text-right top-8 right-12 xl:right-0 w-fit h-auto rounded-full outline-offset-4;
       width: fit-content;
       padding: 0;
     }
@@ -196,6 +196,7 @@
     @apply /* bg-white */
     order-3 
     lg:order-2
+    mx-auto
     w-full
     lg:w-fit;
   }
@@ -269,6 +270,11 @@
   }
 }
 
+/* Handling background page scroll */
+body:has(.menu-renovateur .sub-menu--open) {
+  @apply overflow-hidden;
+}
+
 .menu-renovateur--footer {
   @apply p-0 shadow-none w-full;
   .menu-renovateur__navlist-container {