N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source 
- Use `max-height: 9999px` for smoother animation than `max-height: 100%`
- Issue #668
This commit is contained in:
Michael Rose 2016-11-21 16:01:59 -05:00
parent 3b457aa8f1
commit 2b7166dede
2 changed files with 4 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
_sass/_navigation.scss
View file

@ -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;

4
docs/_sass/_navigation.scss
View file

@ -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;