379-revert some of PR 378 CSS (#380)

* 379-revert some of PR 378 CSS

* add height back

* moved fixed position

* linting

blocks/blog-home/blog-home.css

@@ -5,6 +5,7 @@ body[filters-open="true"] {
 
 .thought-leadership-home.main,
 .blog-home.main {
+  padding-top: var(--nav-height-mobile);
   margin: auto;
 }
 
@@ -648,7 +649,7 @@ h5 {
     font-family: var(--sans-serif-font-light);
   }
 
-  
+
   .thought-leadership-home .blog-content .card-group .card-item.featured-article .card-image,
   .thought-leadership-home .blog-content .card-group .card-item.featured-article .card-content,
   .blog-home .blog-content .card-group .card-item.featured-article .card-image,
@@ -715,6 +716,11 @@ h5 {
 
 /* Desktop styles */
 @media only screen and (min-width: 1200px) {
+  .thought-leadership-home.main,
+  .blog-home.main {
+    padding-top: var(--nav-height-desktop);
+  }
+
   main .section.thought-leadership-home-container,
   main .section.blog-home-container {
     padding-top: var(--spacer-layout-06);

blocks/header/header.css

@@ -2,7 +2,6 @@
 
 /* header and nav layout */
 header {
-  position: fixed;
   float: left;
   clear: none;
   border-bottom: 1px solid var(--neutral-sand);
@@ -11,7 +10,6 @@ header {
   left: 0;
   top: 0;
   transition: all .5s ease;
-  z-index: 99999;
   font-family: var(--sans-serif-font-medium);
 }
 
@@ -545,6 +543,10 @@ header nav .nav-sections .mega-menu a.link-with-icon span.icon svg {
     padding: var(--spacer-layout-05) calc((100vw - var(--section-width-desktop)) / 2) var(--spacer-layout-07);
   }
 
+  header.is-sticky nav .nav-sections > ul > li[aria-expanded='true'] > ul.level-two {
+    top: var(--sticky-nav-height);
+  }
+
   header nav .nav-sections > ul > li[aria-expanded='true'] > ul > li.level-two:not(.mega-menu, .featured) {
     padding: 1% 0;
     width: 280px;

blocks/solution-header/solution-header.css

@@ -8,7 +8,6 @@
   left: 0;
   top: 0;
   transition: all .5s ease;
-  z-index: 99999;
 }
 
 .solution-header {
@@ -163,10 +162,6 @@
 }
 
 /* Sticky - Solution Header */
-body.microsites.header-visible main {
-  padding-top: 140px;
-}
-
 .solution-header-wrapper.is-sticky {
   background-color: var(--neutral-carbon);
   border-bottom: 1px solid var(--neutral-carbon);
@@ -288,7 +283,7 @@ body.microsites.header-visible main {
 }
 
 .solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .solution-header__col-3 .button.secondary:hover {
-  background-image: var(--gradient-to-right); 
+  background-image: var(--gradient-to-right);
 }
 
 .solution-header.navattic .solution-header__inner .solution-header__col-3 .button.primary {
@@ -314,7 +309,7 @@ body.microsites.header-visible main {
 }
 
 .solution-header-wrapper.is-sticky .solution-header.navattic .solution-header__inner .solution-header__col-3 .button.primary:hover {
-  background-image: var(--gradient-to-right); 
+  background-image: var(--gradient-to-right);
 }
 
 .solution-header-wrapper.is-sticky .solution-header ul li a {
@@ -376,7 +371,7 @@ body.microsites.header-visible main {
     top: calc(var(--spacer-element-02) * -1);
     right: var(--spacer-layout-036);
   }
-  
+
   .solution-header-wrapper.is-sticky .solution-header .solution-header__inner .solution-header__col-3 {
     display: none;
   }
@@ -408,7 +403,7 @@ body.microsites.header-visible main {
 }
 
 /* Desktop */
-@media (min-width: 1200px) {  
+@media (min-width: 1200px) {
   /* Block - Solution Header */
   .solution-header {
     margin: 0 auto;
@@ -437,7 +432,7 @@ body.microsites.header-visible main {
   .solution-header ul li:first-child {
     padding-left: 0;
   }
-  
+
   .solution-header ul li:last-child {
     padding-right: 0;
   }
@@ -475,6 +470,11 @@ body.microsites.header-visible main {
   /* Sticky - Solution Header */
   .solution-header-wrapper {
     border-bottom: 1px solid var(--neutral-sand);
+    height: var(--nav-height-desktop);
+  }
+
+  .solution-header-wrapper.is-sticky {
+    height: var(--sticky-nav-height);
   }
 
   .solution-header-wrapper.is-sticky .solution-header__inner {
@@ -505,7 +505,7 @@ body.microsites.header-visible main {
     clip-path: circle(50% at 50% 50%);
     border: unset;
   }
-  
+
   .solution-header-wrapper.is-sticky .solution-header .icon svg {
     height: var(--spacer-element-09);
     width: unset;
@@ -514,4 +514,4 @@ body.microsites.header-visible main {
   .solution-header-wrapper .solution-header.navattic .icon svg, .solution-header-wrapper.is-sticky .solution-header.navattic .icon svg {
     height: var(--spacer-layout-04);
   }
-}
+}

styles/styles.css

@@ -547,6 +547,7 @@ body main {
 header {
   position: fixed;
   height: var(--nav-height-mobile);
+  z-index: 99999;
 }
 
 @media (min-width: 1200px) {
@@ -1653,7 +1654,7 @@ body.quick-links main .section > div {
 .section-pattern {
   height: var(--gap-84);
   background-color: var(--neutral-bone);
-  background-repeat: repeat-x; 
+  background-repeat: repeat-x;
   background-size: 400px auto;
   background-position: calc(var(--spacer-element-04) * -1) 0;
 }