ourworld_web/www_ourworld_new
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update Header_darkbg navigation layout and styling to center nav links with uppercase text

Browse Source
This commit is contained in:
sasha-astiadi
2025-12-05 14:06:17 +01:00
parent fad1ed7895
commit 171483f02e
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/Header_darkbg.tsx
View File

@@ -22,7 +22,7 @@ function NavLinkDark({
return ( return (
<Link <Link
href={href} href={href}
className="inline-block rounded-lg px-2 py-1 text-base text-white hover:bg-white/10 hover:text-white" className="inline-block rounded-lg px-2 tracking-wider py-1 text-sm text-white hover:bg-white/10 hover:text-white"
> >
{children} {children}
</Link> </Link>
@@ -100,25 +100,25 @@ export function Header_darkbg() {
return ( return (
<header className="py-5 bg-transparent relative"> <header className="py-5 bg-transparent relative">
<Container> <Container>
<nav className="relative z-50 flex justify-between"> <nav className="relative z-50 flex items-center justify-between">
{/* Left: Logo */}
<div className="flex items-center md:gap-x-12"> <div className="flex items-center md:gap-x-12">
<Link href="/" aria-label="Home"> <Link href="/" aria-label="Home">
<Logo_darkbg className="h-6 w-auto lg:h-6 md:h-8" /> <Logo_darkbg className="h-6 w-auto lg:h-6 md:h-8" />
</Link> </Link>
<div className="hidden md:flex md:gap-x-6"> </div>
<NavLinkDark href="/about">About</NavLinkDark>
<NavLinkDark href="/ventures">Ventures</NavLinkDark>
<NavLinkDark href="/people">People</NavLinkDark>
</div> {/* Middle: empty spacer */}
</div> <div className="flex-1" />
{/* Right: Nav links (desktop) + mobile menu */}
<div className="flex items-center gap-x-5 md:gap-x-8"> <div className="flex items-center gap-x-5 md:gap-x-8">
<div className="hidden md:block"> <div className="hidden md:flex md:gap-x-6">
<Button href="/contact" color="white"> <NavLinkDark href="/about">ABOUT</NavLinkDark>
<span> <NavLinkDark href="/ventures">VENTURES</NavLinkDark>
Contact Us <NavLinkDark href="/people">TEAM</NavLinkDark>
</span> <NavLinkDark href="/contact">FELLOWSHIP</NavLinkDark>
</Button> <NavLinkDark href="/contact">NEWS</NavLinkDark>
</div> </div>
<div className="-mr-1 md:hidden"> <div className="-mr-1 md:hidden">
<MobileNavigation /> <MobileNavigation />