diff --git a/agnosticui-css/header.css b/agnosticui-css/header.css
index 4ebf6a66f..d917e3214 100644
--- a/agnosticui-css/header.css
+++ b/agnosticui-css/header.css
@@ -14,9 +14,9 @@
 .header,
 .header-skin {
   --agnosticui-default-header-font-family: -apple-system, BlinkMacSystemFont,
-  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+    "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --agnosticui-default-header-box-shadow-hor: 0px;
   --agnosticui-default-header-box-shadow-ver: 1px;
   --agnosticui-default-header-box-shadow-blur: 5px;
@@ -78,6 +78,7 @@
 
 .header .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
@@ -100,22 +101,24 @@
  */
 
 .header-sticky {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
 }
 
-@media (min-width: 599px) {
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
   .header {
     height: var(
       --agnosticui-header-height,
       var(--agnosticui-default-header-height)
     );
   }
-}
-
-@media (min-width: 960px) {
-  .header .header-content {
-    justify-content: space-between;
-  }
 }
\ No newline at end of file
diff --git a/agnosticui-css/headernav.css b/agnosticui-css/headernav.css
index bffab3b85..63e152dc7 100644
--- a/agnosticui-css/headernav.css
+++ b/agnosticui-css/headernav.css
@@ -11,6 +11,9 @@
 .header-nav ul {
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .header-nav li {
@@ -18,8 +21,18 @@
 }
 
 .header-nav li:not(:last-child) {
-  margin-right: var(
-    --agnosticui-header-nav-spacing,
-    var(--agnosticui-default-header-nav-spacing)
-  );
+  margin-right: initial;
+}
+
+@media (min-width: 960px) {
+  .header-nav ul {
+    flex-direction: row;
+  }
+
+  .header-nav li:not(:last-child) {
+    margin-right: var(
+      --agnosticui-header-nav-spacing,
+      var(--agnosticui-default-header-nav-spacing)
+    );
+  }
 }
\ No newline at end of file
diff --git a/agnosticui-react/src/stories/header.css b/agnosticui-react/src/stories/header.css
index 4ebf6a66f..d917e3214 100644
--- a/agnosticui-react/src/stories/header.css
+++ b/agnosticui-react/src/stories/header.css
@@ -14,9 +14,9 @@
 .header,
 .header-skin {
   --agnosticui-default-header-font-family: -apple-system, BlinkMacSystemFont,
-  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+    "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --agnosticui-default-header-box-shadow-hor: 0px;
   --agnosticui-default-header-box-shadow-ver: 1px;
   --agnosticui-default-header-box-shadow-blur: 5px;
@@ -78,6 +78,7 @@
 
 .header .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
@@ -100,22 +101,24 @@
  */
 
 .header-sticky {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
 }
 
-@media (min-width: 599px) {
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
   .header {
     height: var(
       --agnosticui-header-height,
       var(--agnosticui-default-header-height)
     );
   }
-}
-
-@media (min-width: 960px) {
-  .header .header-content {
-    justify-content: space-between;
-  }
 }
\ No newline at end of file
diff --git a/agnosticui-react/src/stories/headernav.css b/agnosticui-react/src/stories/headernav.css
index bffab3b85..63e152dc7 100644
--- a/agnosticui-react/src/stories/headernav.css
+++ b/agnosticui-react/src/stories/headernav.css
@@ -11,6 +11,9 @@
 .header-nav ul {
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .header-nav li {
@@ -18,8 +21,18 @@
 }
 
 .header-nav li:not(:last-child) {
-  margin-right: var(
-    --agnosticui-header-nav-spacing,
-    var(--agnosticui-default-header-nav-spacing)
-  );
+  margin-right: initial;
+}
+
+@media (min-width: 960px) {
+  .header-nav ul {
+    flex-direction: row;
+  }
+
+  .header-nav li:not(:last-child) {
+    margin-right: var(
+      --agnosticui-header-nav-spacing,
+      var(--agnosticui-default-header-nav-spacing)
+    );
+  }
 }
\ No newline at end of file
diff --git a/agnosticui-svelte/src/stories/Header.svelte b/agnosticui-svelte/src/stories/Header.svelte
index 96d347283..062dfac3b 100644
--- a/agnosticui-svelte/src/stories/Header.svelte
+++ b/agnosticui-svelte/src/stories/Header.svelte
@@ -30,9 +30,9 @@
 .header,
 .header-skin {
   --agnosticui-default-header-font-family: -apple-system, BlinkMacSystemFont,
-  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+    "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --agnosticui-default-header-box-shadow-hor: 0px;
   --agnosticui-default-header-box-shadow-ver: 1px;
   --agnosticui-default-header-box-shadow-blur: 5px;
@@ -94,6 +94,7 @@
 
 .header .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
@@ -116,12 +117,20 @@
  */
 
 .header-sticky {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
 }
 
-@media (min-width: 599px) {
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
   .header {
     height: var(
       --agnosticui-header-height,
@@ -129,12 +138,6 @@
     );
   }
 }
-
-@media (min-width: 960px) {
-  .header .header-content {
-    justify-content: space-between;
-  }
-}
 </style>
 
 <div class={klasses}>
diff --git a/agnosticui-svelte/src/stories/HeaderNav.svelte b/agnosticui-svelte/src/stories/HeaderNav.svelte
index 98d1721aa..1349f3c8d 100644
--- a/agnosticui-svelte/src/stories/HeaderNav.svelte
+++ b/agnosticui-svelte/src/stories/HeaderNav.svelte
@@ -19,6 +19,9 @@
 .header-nav :global(ul) {
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .header-nav :global(li) {
@@ -26,10 +29,20 @@
 }
 
 .header-nav :global(li:not(:last-child)) {
-  margin-right: var(
-    --agnosticui-header-nav-spacing,
-    var(--agnosticui-default-header-nav-spacing)
-  );
+  margin-right: initial;
+}
+
+@media (min-width: 960px) {
+  .header-nav ul {
+    flex-direction: row;
+  }
+
+  .header-nav li:not(:last-child) {
+    margin-right: var(
+      --agnosticui-header-nav-spacing,
+      var(--agnosticui-default-header-nav-spacing)
+    );
+  }
 }
 </style>
 
diff --git a/agnosticui-vue/src/stories/Header.vue b/agnosticui-vue/src/stories/Header.vue
index cf7c44554..fcafbe6c8 100644
--- a/agnosticui-vue/src/stories/Header.vue
+++ b/agnosticui-vue/src/stories/Header.vue
@@ -15,9 +15,9 @@
 .header,
 .header-skin {
   --agnosticui-default-header-font-family: -apple-system, BlinkMacSystemFont,
-  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+    "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --agnosticui-default-header-box-shadow-hor: 0px;
   --agnosticui-default-header-box-shadow-ver: 1px;
   --agnosticui-default-header-box-shadow-blur: 5px;
@@ -79,6 +79,7 @@
 
 .header .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
@@ -101,12 +102,20 @@
  */
 
 .header-sticky {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
 }
 
-@media (min-width: 599px) {
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
   .header {
     height: var(
       --agnosticui-header-height,
@@ -114,12 +123,6 @@
     );
   }
 }
-
-@media (min-width: 960px) {
-  .header .header-content {
-    justify-content: space-between;
-  }
-}
 </style>
 <template>
   <div :class="classes">
diff --git a/agnosticui-vue/src/stories/HeaderNav.vue b/agnosticui-vue/src/stories/HeaderNav.vue
index f0cd9e985..a06445f2f 100644
--- a/agnosticui-vue/src/stories/HeaderNav.vue
+++ b/agnosticui-vue/src/stories/HeaderNav.vue
@@ -12,6 +12,9 @@
 .header-nav ul {
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .header-nav li {
@@ -19,10 +22,20 @@
 }
 
 .header-nav li:not(:last-child) {
-  margin-right: var(
-    --agnosticui-header-nav-spacing,
-    var(--agnosticui-default-header-nav-spacing)
-  );
+  margin-right: initial;
+}
+
+@media (min-width: 960px) {
+  .header-nav ul {
+    flex-direction: row;
+  }
+
+  .header-nav li:not(:last-child) {
+    margin-right: var(
+      --agnosticui-header-nav-spacing,
+      var(--agnosticui-default-header-nav-spacing)
+    );
+  }
 }
 </style>
 <template>
diff --git a/showcase/public/index.html b/showcase/public/index.html
index ca7a2554f..12549a197 100644
--- a/showcase/public/index.html
+++ b/showcase/public/index.html
@@ -24,6 +24,9 @@
       --agnosticui-header-box-shadow-spread: 0;
       --agnosticui-header-box-shadow-blur: 1px;
 
+      /* Customizes the mobile header height */
+      --agnosticui-header-mobile-height: 250px;
+
       --agnosticui-gray-light-warm: #fff7f7;
       --agnosticui-gray-warm: #e2c0c0;
       --agnosticui-gray-mid-dark: #bbbbbb;
diff --git a/showcase/src/views/AppHeader.vue b/showcase/src/views/AppHeader.vue
index 04c6bdb4f..7dad63a03 100644
--- a/showcase/src/views/AppHeader.vue
+++ b/showcase/src/views/AppHeader.vue
@@ -58,19 +58,35 @@ export default {
 
 <style>
 .HeaderNavOverrides .pre-pipe {
-  margin-right: var(--Space-32);
+  margin-right: 0;
 }
 .HeaderNavOverrides .pipe {
-  display: inline;
+  display: none;
   padding: 0;
   border-left: solid 1px var(--agnosticui-gray-mid-dark);
 }
+.HeaderOverrides .logo {
+  margin-bottom: var(--Space-24);
+  /* margin-top: var(--Space-32); */
+  line-height: 0;
+}
+
 .HeaderOverrides .logo,
 .HeaderNavOverrides .menu a {
   background: initial;
   font-weight: 300;
 }
-.HeaderOverrides .logo {
-  line-height: 0;
+
+@media only screen and (min-width: 992px) {
+  .HeaderNavOverrides .pre-pipe {
+    margin-right: var(--Space-32);
+  }
+  .HeaderNavOverrides .pipe {
+    display: inline;
+  }
+  .HeaderOverrides .logo {
+    margin-bottom: initial;
+    margin-top: initial;
+  }
 }
 </style>