Use fixed position instead of sticky for sidenav and top bar so it works in IE

This commit is contained in:
leigh-mil
2019-08-30 11:27:40 -04:00
parent c089682a27
commit 8b78b2a553
8 changed files with 63 additions and 45 deletions

View File

@@ -25,9 +25,12 @@ body {
margin: $gap;
flex-grow: 1;
-ms-flex-negative: 1;
top: 68px;
position: relative;
@include media($medium-screen) {
margin: $gap * 2;
top: 68px;
}
}
}

View File

@@ -9,7 +9,7 @@
}
&.js-is-sticky {
width: 80.8%;
width: calc(100% - 25rem);
}
.sticky-cta-container {

View File

@@ -2,11 +2,10 @@
background-color: $color-blue-darkest;
border-bottom: 1px solid $color-black;
height: 48px;
&.js-is-sticky {
width: 100%;
z-index: 16;
}
position: fixed;
top: 20px;
width: 100%;
z-index: 10;
&__navigation {
display: flex;

View File

@@ -3,6 +3,9 @@
align-items: center;
padding: ($gap / 2) $gap;
z-index: 15;
position: fixed;
height: 20px;
width: 100%;
img {
flex-grow: 0;

View File

@@ -5,17 +5,30 @@
.sidenav-container {
box-shadow: $box-shadow;
overflow: hidden;
position: relative;
top: 68px;
.sidenav {
@include media($large-screen) {
margin: 0px;
}
&__toggler {
width: 25rem;
&.js-is-sticky {
width: 19.2%;
min-width: 25rem;
&--minimized {
@extend .sidenav-container__toggler;
width: 10rem;
}
}
&__fixed {
position: fixed;
overflow: scroll;
}
.sidenav {
width: 25rem;
overflow: scroll;
@include media($large-screen) {
margin: 0px;
}
&__title {
@@ -184,9 +197,5 @@
width: 10rem;
margin: 0px;
&.js-is-sticky {
width: 10rem;
}
}
}