navbar.css 799 B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. /* Navbar Styling */
  2. .navbar {
  3. position: sticky;
  4. top: 0; /* Stick to the top */
  5. z-index: 1000; /* Ensures the navbar stays above other elements */
  6. display: grid;
  7. grid-template-columns: auto 1fr auto;
  8. align-items: center;
  9. background-color: white;
  10. padding: 10px 20px;
  11. box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  12. width: 100%;
  13. max-width: 96%;
  14. border-radius: 8px;
  15. }
  16. .navbar-brand {
  17. font-size: 1.5rem;
  18. font-weight: bold;
  19. color: #333;
  20. }
  21. .navbar-links {
  22. display: grid;
  23. grid-template-columns: repeat(4, auto);
  24. gap: 20px;
  25. list-style: none;
  26. justify-self: end;
  27. }
  28. .navbar-links a {
  29. text-decoration: none;
  30. color: #333;
  31. font-size: 1rem;
  32. transition: color 0.3s ease;
  33. }
  34. .navbar-links a:hover {
  35. color: #6c63ff;
  36. }