archiwum/gractwo-pl
Archived
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add a navpusher to fix nav's overlapping issues

Browse Source 
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:
jakubmanczak
2022-08-08 15:07:30 +02:00
parent b4c28c154c
commit a6ac9b7665
2 changed files with 27 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/Header.js
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>
</>
);
}

3
styles/globals.scss
View File

@@ -18,6 +18,9 @@ body {
scrollbar-width: none; /* Firefox */
}
.navpusher {
height: 4rem;
}
nav.main {
z-index: 1;
height: 4rem;