1
Fork 0

Fix navbar on very small screens

This commit is contained in:
Jake Howard 2024-07-14 17:45:43 +01:00
parent 42945b97c0
commit 69e5b93d2e
Signed by: jake
GPG key ID: 57AFB45680EDD477
3 changed files with 19 additions and 8 deletions

View file

@ -1,6 +1,7 @@
<html> <html>
<head> <head>
<link rel="stylesheet" href="./index.scss" /> <link rel="stylesheet" href="./index.scss" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head> </head>
<body> <body>
<header class="header"> <header class="header">
@ -28,6 +29,6 @@
</ul> </ul>
</nav> </nav>
</header> </header>
<script src="index.js"></script> <script src="index.js" type="module"></script>
</body> </body>
</html> </html>

View file

@ -18,7 +18,8 @@ header {
padding: 0; padding: 0;
} }
.menu, .icons { .menu,
.icons {
list-style: none; list-style: none;
display: inline-flex; display: inline-flex;
margin: 0; margin: 0;
@ -51,12 +52,13 @@ header {
height: 100vh; height: 100vh;
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transition-duration: 0.25s; transition-duration: 0.2s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
overflow: hidden; overflow: scroll;
flex-direction: column; flex-direction: column;
.menu, .icons { .menu,
.icons {
display: initial; display: initial;
text-align: center; text-align: center;
@ -81,7 +83,7 @@ header {
} }
.nav-close { .nav-close {
position: absolute; position: fixed;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
color: white; color: white;
@ -108,3 +110,11 @@ header {
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
@media (max-height: 500px) {
/* If the window is small enough, items are pushed out the viewport, as it's positioned
in the middle of the screen. This fixes it to the top so it can scroll properly. */
nav {
justify-content: unset;
}
}