add a navpusher to fix nav's overlapping issues

due to the "sticky" nature of the navigation bar used in the site content would get pushed under it and hidden
another element with the height of the navbar has been added that now fixed this issue
This commit is contained in:
2022-08-08 15:07:30 +02:00
parent b4c28c154c
commit a6ac9b7665
2 changed files with 27 additions and 15 deletions

View File

@@ -3,20 +3,29 @@ import { GractwoLogo } from "./GractwoLogo";
export default function Home() {
return (
<nav className="main">
<GractwoLogo className="logo" />
<Link href="/">
<a>Główna</a>
</Link>
<Link href="">
<a>Rankingi</a>
</Link>
<Link href="/o-gractwie">
<a>O Gractwie</a>
</Link>
<Link href="">
<a>Zaloguj się</a>
</Link>
</nav>
<>
<nav className="main">
<GractwoLogo className="logo" />
<Link href="/">
<a>Główna</a>
</Link>
<Link href="">
<a>Rankingi</a>
</Link>
<Link href="/o-gractwie">
<a>O Gractwie</a>
</Link>
<Link href="">
<a>Zaloguj się</a>
</Link>
</nav>
<p className="navpusher">
I&apos;m coming after you.
{/*
This is rendered behind the navbar, pushing the main page's
content downwards while keeping nav's fixed position.
*/}
</p>
</>
);
}