From a9039f6b5ca7ebd5fb3c9ffe3968a97e49faee93 Mon Sep 17 00:00:00 2001
From: sammy0318 <reetasingh197518@gmail.com>
Date: Mon, 16 Dec 2024 00:35:42 +0530
Subject: [PATCH] ddd

---
 .vscode/settings.json |  3 +++
 index.html            |  4 ++++
 script.js             | 37 +++++++++++++++++++++++++------------
 style.css             |  9 +++++++--
 4 files changed, 39 insertions(+), 14 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..f673a71b7
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7386ead22..3a974d86e 100644
--- a/index.html
+++ b/index.html
@@ -94,6 +94,10 @@
                 <span class="bar"></span>
                 <span class="bar"></span>
             </div>
+            <ul class="nav-menu">
+                <!-- Additional nav items -->
+            </ul>
+            
         </nav>
     </header>
     <!-- Navigation bar section ends  -->
diff --git a/script.js b/script.js
index f9534704d..d4ae58060 100644
--- a/script.js
+++ b/script.js
@@ -29,21 +29,34 @@ document.addEventListener("DOMContentLoaded", function () {
     }, 500);
 });
 
-// Hamburger menu
-hamburger.addEventListener("click", mobileMenu);
+document.addEventListener("DOMContentLoaded", () => {
+    const hamburger = document.querySelector(".hamburger");
+    const navMenu = document.querySelector(".nav-menu");
+
+    // Verify the elements exist
+    if (!hamburger || !navMenu) {
+        console.error("Hamburger or nav-menu element not found.");
+        return;
+    }
 
-function mobileMenu() {
-    hamburger.classList.toggle("active");
-    navMenu.classList.toggle("active");
-}
+    // Attach click event to toggle menu visibility
+    hamburger.addEventListener("click", () => {
+        console.log("Hamburger clicked.");
+        hamburger.classList.toggle("active");
+        navMenu.classList.toggle("show");
+    });
 
-const navLink = document.querySelectorAll(".nav-link");
-navLink.forEach(n => n.addEventListener("click", closeMenu));
+    // Close menu when a link is clicked
+    const navLinks = document.querySelectorAll(".nav-link");
+    navLinks.forEach(link => {
+        link.addEventListener("click", () => {
+            console.log("Nav link clicked.");
+            hamburger.classList.remove("active");
+            navMenu.classList.remove("show");
+        });
+    });
+});
 
-function closeMenu() {
-    hamburger.classList.remove("active");
-    navMenu.classList.remove("active");
-}
 
 // Google Translate
 function googleTranslateElementInit() {
diff --git a/style.css b/style.css
index 83bc57d71..1b88b1e08 100644
--- a/style.css
+++ b/style.css
@@ -2174,10 +2174,15 @@ footer {
         backdrop-filter: blur(7px);
         transition: 0.5s ease-in-out;
     }
+    .nav-menu.show {
+        display: flex; /* Or block, depending on your design */
+    }
+    
 
     .nav-item {
-        margin: 3.5rem 0;
-        font-size: 20px;
+        margin: 10px ;
+        font-size: 30px;
+       
     }
 
     nav li:hover {