diff --git a/styles/components/_global_layout.scss b/styles/components/_global_layout.scss index 710643ab..26d2bdeb 100644 --- a/styles/components/_global_layout.scss +++ b/styles/components/_global_layout.scss @@ -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; } } } diff --git a/styles/components/_sticky_cta.scss b/styles/components/_sticky_cta.scss index 1e488293..31d2fa80 100644 --- a/styles/components/_sticky_cta.scss +++ b/styles/components/_sticky_cta.scss @@ -9,7 +9,7 @@ } &.js-is-sticky { - width: 80.8%; + width: calc(100% - 25rem); } .sticky-cta-container { diff --git a/styles/components/_topbar.scss b/styles/components/_topbar.scss index c38ef04b..8bbe20b1 100644 --- a/styles/components/_topbar.scss +++ b/styles/components/_topbar.scss @@ -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; diff --git a/styles/components/_usa_banner.scss b/styles/components/_usa_banner.scss index 07a11fa9..be5dc5ce 100644 --- a/styles/components/_usa_banner.scss +++ b/styles/components/_usa_banner.scss @@ -3,6 +3,9 @@ align-items: center; padding: ($gap / 2) $gap; z-index: 15; + position: fixed; + height: 20px; + width: 100%; img { flex-grow: 0; diff --git a/styles/elements/_sidenav.scss b/styles/elements/_sidenav.scss index c60550cb..5bc1a8f3 100644 --- a/styles/elements/_sidenav.scss +++ b/styles/elements/_sidenav.scss @@ -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; - } } } diff --git a/templates/components/sticky_cta.html b/templates/components/sticky_cta.html index d47e29cb..abb67d55 100644 --- a/templates/components/sticky_cta.html +++ b/templates/components/sticky_cta.html @@ -1,5 +1,5 @@ {% macro StickyCTA(text) -%} -
+

{{ text }}

diff --git a/templates/navigation/global_sidenav.html b/templates/navigation/global_sidenav.html index 36a95700..e34f6843 100644 --- a/templates/navigation/global_sidenav.html +++ b/templates/navigation/global_sidenav.html @@ -4,31 +4,35 @@
diff --git a/templates/navigation/topbar.html b/templates/navigation/topbar.html index 4f44780c..0defde8a 100644 --- a/templates/navigation/topbar.html +++ b/templates/navigation/topbar.html @@ -1,6 +1,6 @@ {% from "components/icon.html" import Icon %} -
+