Clean up code and use correct height on usa-banner

styles/components/_topbar.scss

@@ -3,7 +3,7 @@
   border-bottom: 1px solid $color-black;
   height: 48px;
   position: fixed;
-  top: 20px;
+  top: 28px;
   width: 100%;
   z-index: 10;
 

styles/components/_usa_banner.scss

@@ -4,7 +4,7 @@
   padding: ($gap / 2) $gap;
   z-index: 15;
   position: fixed;
-  height: 20px;
+  height: 28px;
   width: 100%;
 
   img {

styles/elements/_sidenav.scss

@@ -7,7 +7,7 @@
   box-shadow: $box-shadow;
   overflow: hidden;
   position: relative;
-  top: 68px;
+  top: 76px;
   width: 25rem;
 
   &--minimized {
@@ -49,16 +49,17 @@
       }
     }
 
-    .sidenav__list--padded {
+    ul {
+      &.sidenav__list--padded {
         margin: ( 4 * $gap) 0;
         position: fixed;
         overflow-y: scroll;
-      top: 98px;
+        top: 106px;
         bottom: 35px;
         left: 0;
         width: 25rem;
+      }
 
-      ul {
       list-style: none;
       padding: 0;
 
@@ -67,7 +68,6 @@
         display: block;
       }
     }
-    }
 
     &__divider--small {
       display: block;

templates/components/sticky_cta.html

@@ -1,5 +1,5 @@
 {% macro StickyCTA(text) -%}
-    <div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 68 }'>
+    <div class="sticky-cta" v-sticky='{ "stickyBitStickyOffset": 76 }'>
         <div class="sticky-cta-container">
             <div class="sticky-cta-text">
                 <h3>{{ text }}</h3>

templates/navigation/global_sidenav.html

@@ -2,11 +2,11 @@
 {% from "components/sidenav_item.html" import SidenavItem %}
 
 
-<div v-cloak is="SidenavToggler">
+<div v-cloak is="SidenavToggler" class="global-navigation">
   <template slot-scope='props'>
     <div v-bind:class="{'sidenav-container': props.isVisible, 'sidenav-container--minimized': !props.isVisible}">
       <div class="sidenav-container__fixed">
-        <div v-bind:class="{'global-navigation': true, 'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
+        <div v-bind:class="{'sidenav': props.isVisible, 'sidenav--minimized': !props.isVisible}">
           <a href="#" v-on:click="props.toggle" class="sidenav__toggle">
             <template v-if="props.isVisible">
               {{ Icon('angle-double-left-solid', classes="toggle-arrows icon--blue") }}
@@ -19,8 +19,7 @@
           </a>
           <div v-if="props.isVisible">
             <div class="sidenav__title">Portfolios</div>
-            <div class="sidenav__list--padded">
-              <ul>
+            <ul class="sidenav__list--padded">
               {% if portfolios %}
                 {% for other_portfolio in portfolios|sort(attribute='name') %}
                   {{ SidenavItem(other_portfolio.name,
@@ -36,6 +35,5 @@
         </div>
       </div>
     </div>
-    </div>
   </template>
 </div>