fixed header

app/Components/layout/BarNavigation/BarNavigation.css

@@ -21,7 +21,9 @@
   cursor: pointer;
   color: #585858;
   width: 100%;
-  transition: background-color 0.3s ease, border 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    border 0.3s ease;
   font-size: 1.5rem;
 }
 
@@ -71,7 +73,9 @@
   border-radius: 8px;
   background-color: #ffffff;
   transition: color 0.3s ease;
-  transition: opacity 0.4s ease, max-height 0.4s ease;
+  transition:
+    opacity 0.4s ease,
+    max-height 0.4s ease;
 }
 
 .subMenu ul a {
@@ -87,11 +91,6 @@
   color: #101113;
 }
 
-.subMenu:hover ul {
-  opacity: 1;
-  max-height: 500px;
-}
-
 .subMenu:hover ul a {
   display: flex;
 }
@@ -138,6 +137,13 @@ tbody {
   font-size: 1.25rem;
 }
 
+@media (min-width: 1001px) {
+  .subMenu:hover ul {
+    opacity: 1;
+    max-height: 500px;
+  }
+}
+
 @media (max-width: 1000px) {
   .menuToggle {
     display: flex;
@@ -153,7 +159,7 @@ tbody {
 
   .barNavigation {
     font-size: 15px;
-    display: block;
+    justify-content: end;
   }
 
   .barNavigation ul {
@@ -171,7 +177,9 @@ tbody {
 
     pointer-events: none;
 
-    transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out,
+    transition:
+      transform 0.35s ease-in-out,
+      opacity 0.35s ease-in-out,
       visibility 0.35s ease-in-out;
   }
 
@@ -194,6 +202,10 @@ tbody {
     padding: 0;
   }
 
+  .barNavigation li {
+    color: white;
+  }
+
   .barNavigation li:hover {
     color: white;
     border-radius: 0;
@@ -205,14 +217,16 @@ tbody {
     top: 0px;
     width: 100%;
     background-color: rgb(1, 92, 184);
-
     max-height: 0;
     opacity: 0;
     overflow: hidden;
 
     transform: translateY(-5px);
 
-    transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease;
+    transition:
+      max-height 0.35s ease,
+      opacity 0.3s ease,
+      transform 0.3s ease;
   }
 
   .subMenu.open ul {
@@ -221,8 +235,9 @@ tbody {
     transform: translateY(0);
   }
 
-  .subMenu ul {
-    opacity: 0;
+  .subMenu.open ul a{
+    display: flex;
+    pointer-events:auto;
   }
 
   thead,