From 7ee285224ab3d826d3a77110e96d64cad4b06d99 Mon Sep 17 00:00:00 2001
From: saadgibawa <saadgibawa31@gmail.com>
Date: Wed, 2 Oct 2024 15:36:23 +0530
Subject: [PATCH] Changes in navbar

---
 index.html | 16 ++++++++++++++++
 style.css  |  9 +++++++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 0277550a..fdee50b6 100644
--- a/index.html
+++ b/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">
diff --git a/style.css b/style.css
index 148eadd4..eea0b372 100644
--- a/style.css
+++ b/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 */
 }