floating-header

styles/components/Header.module.css

@@ -1,14 +1,29 @@
+
+
+
 .header {
     display: flex;
     justify-content: flex-start;
     flex-direction: row;
     align-items: center;
     height: 130px;
     width: 100%;
-    z-index: 2;
-    margin-top: 20px;
-    margin-bottom: 30px;
+    /* Added styles for floating header */
+    position: fixed;
+    top: 10; /* Position at the top of the viewport */
+    left: 0; /* Position at the left of the viewport */
+    z-index: 20;  /* Ensure it stays on top of other elements */
+    margin-top: 0; /* Remove top margin as it's now fixed */
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
 }
+
+
+
+
+
+
+
+
 
 .logoTitle {
     display: flex;

styles/components/Layout.module.css

@@ -12,6 +12,7 @@
 }
 
 .pageContent {
+    margin-top: 120px; /* Adjust the value if your header height changes */
     width: 97%;
     display: flex;
     flex-direction: column;