txarli/txarli.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make nav sticky while scrolling

Browse Source
This commit is contained in:
Cassidy Williams
2023-01-27 00:00:33 -06:00
parent 77d762b196
commit b90e0de888
2 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Header.astro
View File

@@ -10,19 +10,16 @@ import { SITE_TITLE } from "../config";
<h2>a blog, or whatever</h2>
</div>
</div>
<nav>
<HeaderLink href="/">home</HeaderLink>
<HeaderLink href="/posts">posts</HeaderLink>
<HeaderLink href="https://cassidoo.co">website</HeaderLink>
<HeaderLink href="https://cassidoo.co/newsletter" target="_blank"
>newsletter
</HeaderLink>
</nav>
</header>
<nav>
<HeaderLink href="/">home</HeaderLink>
<HeaderLink href="/posts">posts</HeaderLink>
<HeaderLink href="https://cassidoo.co">website</HeaderLink>
<HeaderLink href="https://cassidoo.co/newsletter" target="_blank"
>newsletter
</HeaderLink>
</nav>
<style>
header {
margin: 0em 0 2em;
}
h2 {
margin: 0.5em 0;
}

18
src/style/global.css
View File

@@ -54,14 +54,25 @@ button.dark-mode button {
background: var(--black);
color: var(--white);
}
body.dark-mode nav {
background: rgba(0, 0, 0, 0.8);
}
header {
position: relative;
}
a {
color: var(--pink);
}
nav {
position: sticky;
top: 0;
text-align: center;
background: rgba(255, 255, 255, 0.8);
}
nav a {
margin: 25px 0;
}
@@ -74,12 +85,9 @@ hr {
margin: 1rem 0;
}
ul {
ul.posts-list,
ul.tags-list {
padding: unset;
}
.posts-list,
.tags-list {
list-style-type: none;
}