Header Overlaps Content on Scroll - Needs Fixed Positioning

index.html

@@ -327,6 +327,22 @@ <h1 style="font-family: var(--ff-philosopher);color: brown;z-index: 99;">Welcome
     window.open('Html-files/menu.html', '_blank');
 });
     </script>
+
+    <!-- New additions for navbar -->
+    <script>
+        window.addEventListener('scroll', function() {
+          const navbar = document.getElementById('top');
+          if (window.scrollY > 250) { // Adjust value for when the navbar becomes solid
+            navbar.style.backgroundColor = 'rgb(176, 63, 63)'; // Add background color when scrolling
+            navbar.style.transition = 'background-color 1s ease-in-out';
+          } else {
+            navbar.style.backgroundColor = 'transparent'; // Make it transparent when scrolled to top
+            navbar.style.transition = 'background-color 0.3s ease-in-out';
+          }
+        });
+    </script>
+
+
     <section class="about_us">
         <div class="move">
             <div id="marque">

style.css

@@ -15,9 +15,14 @@ body {
 }
 
 .navbar {
+  background-color: transparent; /* Initial transparent background */
+  transition: background-color 1s ease-in-out, backdrop-filter 0.3s, color 0.3s; /* Smooth transition for color change*/
   padding: 8px 0px;
-  height: 60px;
-  transition: background-color 0.3s, backdrop-filter 0.3s, color 0.3s; /* Added transitions for smooth color change */
+  position: fixed; /* Keep it at the top */
+  top: 0; 
+  width: 100%;
+  z-index: 1000; /* Ensure it stays above other elements */
+  height: 80px;
   backdrop-filter: blur(0); /* Initially no blur */
 }