Refactor Navbar CSS for improved mobile responsiveness and styling

Author: TheCoderAdi

src/Navbar.css

@@ -1,188 +1,103 @@
 .navbar {
-
+  background-color: #1e3a8a;
+  color: white;
+  padding: 15px 20px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.nav-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 1200px;
+  padding: 0 20px;
+}
+
+.logo {
+  font-size: 24px;
+  font-weight: bold;
+  text-decoration: none;
+  color: white;
+}
+
+.nav-links {
+  display: flex;
+  gap: 25px;
+}
+
+.nav-links a {
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+  transition: color 0.3s ease;
+}
+
+.nav-links a:hover {
+  color: #facc15;
+}
+
+.menu-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: none;
+  color: white;
+  font-size: 28px;
+}
+
+@media (max-width: 768px) {
+  .navbar {
+    height: 10vh;
+  }
+  .nav-links {
+    position: absolute;
+    top: 60px;
+    left: 0;
+    width: 100%;
     background-color: #1e3a8a;
-
-    color: white;
-
-    padding: 15px 20px;
-
-    display: flex;
-
-    justify-content: space-between;
-
+    flex-direction: column;
     align-items: center;
-
-    width: 100%;
-
-    position: sticky;
-
-    top: 0;
-
-    z-index: 50;
-
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-
-  }
-
-
-
-
-  .nav-container {
-
+    gap: 0;
+    padding: 10px 0;
     display: flex;
-
-    justify-content: space-between;
-
-    align-items: center;
-
-    width: 100%;
-
-    max-width: 1200px;
-
-    margin: auto;
-
+    transform: translateY(-100%);
+    opacity: 0;
+    visibility: hidden;
+    transition: transform 0.4s ease-out, opacity 0.2s ease-in, visibility 0.2s ease-in;
   }
 
-
-
-
-  .logo {
-
-    font-size: 24px;
-
-    font-weight: bold;
-
-    text-decoration: none;
-
-    color: white;
-
-  }
-
-
-
-
-  .nav-links {
-
-    display: flex;
-
-    gap: 25px;  /* Adjust spacing between links */
-
+  .nav-links.open {
+    transform: translateY(0);
+    opacity: 1;
+    visibility: visible;
+    transition: transform 0.4s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
   }
 
-
-
-
   .nav-links a {
-
-    color: white;
-
-    text-decoration: none;
-
-    font-size: 18px;
-
-    transition: color 0.3s;
-
-  }
-
-
-
-
-  .nav-links a:hover {
-
-    color: #facc15;
-
+    display: block;
+    padding: 10px;
+    width: 100%;
+    text-align: center;
   }
 
-
-
-
-  /* Mobile Menu */
-
   .menu-button {
-
-    background: none;
-
-    border: none;
-
-    cursor: pointer;
-
-    display: none;
-
-    color: white;
-
-    font-size: 24px;
-
+    display: block;
+    padding: 0.8rem 0rem;
   }
+}
 
-
-
-
-  .mobile-menu {
-
-    display: none;
-
+@media (max-width : 480px) {
+  .nav-container{
+    padding: 0 10px;
   }
-
-
-
-
-  @media (max-width: 768px) {
-
-    .nav-links {
-
-      display: none;
-
-    }
-
-
-
-
-    .menu-button {
-
-      display: block;
-
-    }
-
-
-
-
-    .mobile-menu {
-
-      display: block;
-
-      background-color: #1e3a8a;
-
-      padding: 10px;
-
-      text-align: center;
-
-    }
-
-
-
-
-    .mobile-menu a {
-
-      display: block;
-
-      color: white;
-
-      padding: 10px 0;
-
-      text-decoration: none;
-
-    }
-
-
-
-
-    .mobile-menu a:hover {
-
-      color: #facc15;
-
-
-    }
-
-  }
-/* Update */
-
+  .navbar {
+    padding: 10px 5px;
+  } 
+}