diff --git a/src/navbar-modal/index.html b/src/navbar-modal/index.html
index ba65cad..d96298a 100644
--- a/src/navbar-modal/index.html
+++ b/src/navbar-modal/index.html
@@ -1,6 +1,7 @@
+
-
+
diff --git a/src/navbar-modal/index.js b/src/navbar-modal/index.js
index 3cd89ed..90079b5 100644
--- a/src/navbar-modal/index.js
+++ b/src/navbar-modal/index.js
@@ -1,9 +1,9 @@
-window.addEventListener("load", function() {
+window.addEventListener("load", function () {
const NAVBAR_BUTTON = document.querySelector("button.side-menu");
// HACK: Work around window resizing whilst the modal is open animating its size,
// by closing the modal whenever the window is resized
- window.addEventListener("resize", function() {
+ window.addEventListener("resize", function () {
NAVBAR_BUTTON.blur();
});
});
diff --git a/src/navbar-modal/index.scss b/src/navbar-modal/index.scss
index 35dc83c..c799899 100644
--- a/src/navbar-modal/index.scss
+++ b/src/navbar-modal/index.scss
@@ -18,7 +18,8 @@ header {
padding: 0;
}
- .menu, .icons {
+ .menu,
+ .icons {
list-style: none;
display: inline-flex;
margin: 0;
@@ -51,12 +52,13 @@ header {
height: 100vh;
visibility: visible;
opacity: 1;
- transition-duration: 0.25s;
+ transition-duration: 0.2s;
transition-timing-function: ease-in-out;
- overflow: hidden;
+ overflow: scroll;
flex-direction: column;
- .menu, .icons {
+ .menu,
+ .icons {
display: initial;
text-align: center;
@@ -81,7 +83,7 @@ header {
}
.nav-close {
- position: absolute;
+ position: fixed;
top: 1rem;
right: 1rem;
color: white;
@@ -108,3 +110,11 @@ header {
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;
+ }
+}