Fix overlapping sidebar navigation list due to max-height: 100vh

- Use `max-height: 9999px` for smoother animation than `max-height: 100%` - Issue mmistakes#668
makaroniame · Nov 21, 2016 · 88e9af0 · 88e9af0
1 parent f8ca432
commit 88e9af0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/_sass/_navigation.scss b/_sass/_navigation.scss
@@ -431,7 +431,7 @@
   @include breakpoint(max-width ($large - 1px)) {
     position: relative;
     max-height: 0;
-    opacity: 0;
+    opacity: 0%;
     overflow: hidden;
     z-index: 10;
     -webkit-transition: 0.3s ease-in-out;
@@ -446,7 +446,7 @@
   .nav__list input:checked ~ .nav__items {
     -webkit-transition: 0.5s ease-in-out;
     transition: 0.5s ease-in-out;
-    max-height: 100vh;
+    max-height: 9999px; // exaggerate max-height to accommodate tall lists
     overflow: visible;
     opacity: 1;
     margin-top: 1em;

diff --git a/docs/_sass/_navigation.scss b/docs/_sass/_navigation.scss
@@ -431,7 +431,7 @@
   @include breakpoint(max-width ($large - 1px)) {
     position: relative;
     max-height: 0;
-    opacity: 0;
+    opacity: 0%;
     overflow: hidden;
     z-index: 10;
     -webkit-transition: 0.3s ease-in-out;
@@ -446,7 +446,7 @@
   .nav__list input:checked ~ .nav__items {
     -webkit-transition: 0.5s ease-in-out;
     transition: 0.5s ease-in-out;
-    max-height: 100vh;
+    max-height: 9999px; // exaggerate max-height to accommodate tall lists
     overflow: visible;
     opacity: 1;
     margin-top: 1em;