fix: make nav menu and and mobile nav menu responsive

This commit is contained in:
Luis Llanes
2025-04-29 00:57:12 +05:30
committed by Sahaj Jain
parent 7df23b5432
commit d6ed9aec5d
+3 -3
View File
@@ -57,7 +57,7 @@ export function Header({
<span>tweakcn</span>
</div>
</Link>
<nav className="hidden md:flex gap-8">
<nav className="hidden md:flex gap-4 lg:gap-8 items-center">
{["Examples", "Features", "How It Works", "Roadmap", "FAQ"].map(
(item, i) => (
<motion.a
@@ -67,7 +67,7 @@ export function Header({
transition={{ duration: 0.3, delay: 0.1 + i * 0.05 }}
href={`#${item.toLowerCase().replace(/\s+/g, "-")}`}
onClick={handleScrollToSection}
className="text-sm font-medium text-muted-foreground transition-colors hover:text-foreground relative group"
className="text-xs lg:text-sm font-medium text-muted-foreground transition-colors hover:text-foreground relative group"
>
{item}
<span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full"></span>
@@ -160,7 +160,7 @@ export function Header({
exit={{ opacity: 0, y: -20 }}
className="md:hidden absolute top-16 inset-x-0 bg-background/95 backdrop-blur-lg border-b"
>
<div className="container py-4 flex flex-col gap-4 px-4">
<div className="container mx-auto py-4 flex flex-col gap-4 px-4">
{["Examples", "Features", "How It Works", "Roadmap", "FAQ"].map(
(item, i) => (
<motion.a