Completed Issue #841

Css-files/navbarstyles.css

@@ -143,6 +143,13 @@ body {
     color: #d2691e;
 }
 
+/* Add these styles for mobile menu */
+body.menu-open {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+}
+
 /* Mobile Styles */
 @media (max-width: 768px) {
     .navbar-brand {
@@ -164,4 +171,26 @@ body {
     .nav-item {
         margin-bottom: 1rem;
     }
+
+    .navbar-collapse {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: rgba(255, 255, 245, 0.95);
+        padding: 80px 20px 20px;
+        overflow-y: auto;
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        z-index: 1029;
+    }
+
+    .navbar-collapse.show {
+        transform: translateX(0);
+    }
+
+    .navbar-nav {
+        height: 100%;
+    }
 }

index.html

@@ -587,7 +587,38 @@
 
 document.body.classList.add('light-mode');
 
+document.addEventListener('DOMContentLoaded', function() {
+    const hamburger = document.querySelector('.navbar-toggler');
+    const navLinks = document.querySelectorAll('.nav-link');
+    const body = document.body;
+    const navbarCollapse = document.querySelector('.navbar-collapse');
+
+    // Existing hamburger click handler
+    hamburger.addEventListener('click', function() {
+        if (this.getAttribute('aria-expanded') === 'true') {
+            body.classList.add('menu-open');
+        } else {
+            body.classList.remove('menu-open');
+        }
+    });
 
+    // Add click handler for nav links
+    navLinks.forEach(link => {
+        link.addEventListener('click', function() {
+            if (navbarCollapse.classList.contains('show')) {
+                hamburger.click(); // Simulate click on hamburger to close menu
+            }
+        });
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener('click', function(e) {
+        const navbar = document.querySelector('.navbar');
+        if (!navbar.contains(e.target) && navbarCollapse.classList.contains('show')) {
+            hamburger.click();
+        }
+    });
+    });
 </script>
     <!--Navbar End-->