Here is the code snippet for the site header component:
export function SiteHeader() {
return (
<header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-14 max-w-screen-2xl items-center">
<MainNav />
<MobileNav />
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
{/* <div className="w-full flex-1 md:w-auto md:flex-none">
<CommandMenu />
</div> */}
<nav className="flex items-center">
<Link href="" target="_blank" rel="noreferrer">
<div
className={cn(
buttonVariants({
variant: "ghost",
}),
"w-9 px-0"
)}
>
<Icons.discord className="h-4 w-4" />
<span className="sr-only">Discord</span>
</div>
</Link>
</nav>
</div>
</div>
</header>
);
}
Instead of positioning the navbar at the top, I would like to style it similarly to this website: .