fix(storefront): BCTHEME-301 Header content placed out of the header …

…block on mobile (bigcommerce#1908) (bigcommerce#1908)

Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Header content placed out of the header block on mobile. [#1908](https://github.com/bigcommerce/cornerstone/pull/1908)
 - Fixed an issue with dispaying options that are out of stock for product on Cart. [#1911](https://github.com/bigcommerce/cornerstone/pull/1911)
 - Selecting product options doesn't update image on PDP in Internet Explorer. [#1913](https://github.com/bigcommerce/cornerstone/pull/1913)
 - HTML Entity displayed as is via system/error message on a Storefront. [#1888](https://github.com/bigcommerce/cornerstone/pull/1888)

assets/scss/components/stencil/adminBar/_adminBar.scss

@@ -32,7 +32,7 @@
 // =============================================================================
 
 body.hasAdminBar {
-    padding-top: 101px; // 55px (Mobile Header) + 46px (Admin Bar)
+    padding-top: $header-height; // (Mobile Header)
 
     @include breakpoint("medium") {
         padding-top: 0;
@@ -42,16 +42,12 @@ body.hasAdminBar {
         }
 
         .header {
-            padding-top: 0;
+            padding-top: $adminBar-height;
         }
     }
 
-    .header {
-        padding-top: $adminBar-height;
-    }
-
     .navPages-container.is-open {
-        padding-top: 101px;
+        padding-top: $header-height;
     }
 }