the mobile version has overlap

components/navbar.js

@@ -5,9 +5,9 @@ class CustomNavbar extends HTMLElement {
             <style>
                 nav {
                     transition: background-color 0.3s ease;
+                    background-color: rgba(15, 23, 42, 0.95);
                 }
                 .scrolled {
-                    background-color: rgba(15, 23, 42, 0.95);
                     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                 }
                 a {
@@ -26,6 +26,27 @@ class CustomNavbar extends HTMLElement {
                 a:hover::after {
                     width: 100%;
                 }
+                .mobile-menu {
+                    display: none;
+                    position: absolute;
+                    top: 100%;
+                    left: 0;
+                    right: 0;
+                    background-color: rgba(15, 23, 42, 0.95);
+                    padding: 1rem;
+                    z-index: 50;
+                }
+                .mobile-menu.active {
+                    display: block;
+                }
+                .mobile-menu a {
+                    display: block;
+                    padding: 0.75rem 0;
+                    border-bottom: 1px solid rgba(255,255,255,0.1);
+                }
+                .mobile-menu a:last-child {
+                    border-bottom: none;
+                }
             </style>
             <nav class="fixed w-full z-50 py-4 px-6 md:px-12 flex justify-between items-center">
                 <a href="/" class="text-2xl font-bold text-white">QUEST</a>
@@ -35,11 +56,17 @@ class CustomNavbar extends HTMLElement {
                     <a href="#invest" class="text-white">Invest</a>
                     <a href="#contact" class="text-white">Contact</a>
                 </div>
-                <button class="md:hidden text-white" aria-label="mobile menu">
+                <button class="md:hidden text-white" aria-label="mobile menu" id="mobile-menu-button">
                     <i data-feather="menu"></i>
                 </button>
+                <div class="mobile-menu" id="mobile-menu">
+                    <a href="#about" class="text-white">About</a>
+                    <a href="#projects" class="text-white">Projects</a>
+                    <a href="#invest" class="text-white">Invest</a>
+                    <a href="#contact" class="text-white">Contact</a>
+                </div>
             </nav>
-        `;
+`;
     }
 }
 

script.js

@@ -1,15 +1,24 @@
+
 // Mobile menu toggle functionality
 document.addEventListener('DOMContentLoaded', function() {
-    const mobileMenuButton = document.querySelector('button[aria-label="mobile menu"]');
+    const mobileMenuButton = document.querySelector('#mobile-menu-button');
     const mobileMenu = document.querySelector('#mobile-menu');
     
     if (mobileMenuButton) {
         mobileMenuButton.addEventListener('click', function() {
-            mobileMenu.classList.toggle('hidden');
+            mobileMenu.classList.toggle('active');
+            const icon = this.querySelector('i');
+            if (mobileMenu.classList.contains('active')) {
+                feather.replace();
+                icon.setAttribute('data-feather', 'x');
+            } else {
+                feather.replace();
+                icon.setAttribute('data-feather', 'menu');
+            }
+            feather.replace();
         });
     }
-
-    // Smooth scrolling for anchor links
+// Smooth scrolling for anchor links
     document.querySelectorAll('a[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function(e) {
             e.preventDefault();

style.css

@@ -1,8 +1,15 @@
+
 /* Custom styles */
 body {
     overflow-x: hidden;
+    padding-top: 80px; /* Add padding to account for fixed navbar */
 }
 
+@media (min-width: 768px) {
+    body {
+        padding-top: 0;
+    }
+}
 /* Smooth scrolling */
 html {
     scroll-behavior: smooth;