lab/website-components
1
Fork 0
Code Activity

Fix navbar on very small screens

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/navbar-modal/index.html
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>

20
src/navbar-modal/index.scss
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;
}
}