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 (
<Link
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}
</Link>
@@ -100,25 +100,25 @@ export function Header_darkbg() {
return (
<header className="py-5 bg-transparent relative">
<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">
<Link href="/" aria-label="Home">
<Logo_darkbg className="h-6 w-auto lg:h-6 md:h-8" />
</Link>
<div className="hidden md:flex md:gap-x-6">
<NavLinkDark href="/about">About</NavLinkDark>
<NavLinkDark href="/ventures">Ventures</NavLinkDark>
<NavLinkDark href="/people">People</NavLinkDark>
</div>
</div>
{/* Middle: empty spacer */}
<div className="flex-1" />
{/* Right: Nav links (desktop) + mobile menu */}
<div className="flex items-center gap-x-5 md:gap-x-8">
<div className="hidden md:block">
<Button href="/contact" color="white">
<span>
Contact Us
</span>
</Button>
<div className="hidden md:flex md:gap-x-6">
<NavLinkDark href="/about">ABOUT</NavLinkDark>
<NavLinkDark href="/ventures">VENTURES</NavLinkDark>
<NavLinkDark href="/people">TEAM</NavLinkDark>
<NavLinkDark href="/contact">FELLOWSHIP</NavLinkDark>
<NavLinkDark href="/contact">NEWS</NavLinkDark>
</div>
<div className="-mr-1 md:hidden">
<MobileNavigation />