Fix #964 - Rewrite header nav to use position:sticky to account for p…

…adding
mozilla · Aug 3, 2021 · cfd1ba1 · cfd1ba1
1 parent cfaa7f1
commit cfd1ba1
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/static/scss/partials/main.scss b/static/scss/partials/main.scss
@@ -55,7 +55,7 @@ body {
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: 83px 0 0 0;
+  padding: 0 0 0 0;
   font-size: 16px;
   overscroll-behavior: contain;
   line-height: 1.2;
@@ -432,7 +432,7 @@ header {
   background: var(--darkBlueGradient);
   box-shadow: 0 0 3px 0 var(--inkDark);
   z-index: 2;
-  position: fixed;
+  position: sticky;
   top: 0;
   left: 0;
   right: 0;
@@ -2281,7 +2281,7 @@ input.input-has-error {
   }
 
   header {
-    position: fixed;
+    position: sticky;
     top: 0;
     left: 0;
     right: 0;
@@ -2293,7 +2293,7 @@ input.input-has-error {
   }
 
   body {
-    padding-top: 124px;
+    // padding-top: 124px;
   }
 
   .stat-description {

diff --git a/static/scss/partials/vpn-promo.scss b/static/scss/partials/vpn-promo.scss
@@ -4,7 +4,7 @@ body {
 }
 
 .vpn-banner-visible main {
-  padding-top: 17rem;
+  // padding-top: 17rem;
 }
 
 .vpn-promo-banner + .micro-survey-banner {
@@ -145,9 +145,9 @@ body {
 
   .vpn-banner-visible main {
     &.dashboard-container {
-      padding-top: 9rem;
+      // padding-top: 9rem;
     }
-    padding-top: 10rem;
+    // padding-top: 10rem;
   }
 }
 
@@ -157,7 +157,7 @@ body {
   }
 
   .vpn-banner-visible main {
-    padding-top: 5rem;
+    // padding-top: 5rem;
   }
 
 }
@@ -174,12 +174,12 @@ body {
 
 @media screen and (min-width: 850px) {
   .vpn-banner-visible main.dashboard-container {
-    padding-top: 7rem;
+    // padding-top: 7rem;
   }
 }
 
 @media screen and (min-width: 950px) {
   .vpn-banner-visible main.dashboard-container {
-    padding-top: 6rem;
+    // padding-top: 6rem;
   }
 }