ddd

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}

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  -->

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() {

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 {