Responsive Site Header

- Changed Header shortcut menu Icon position
- Fixed Media devices responsive layout

Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: I817d8f11d9fb720bb9e37f4a136cb19305144228

1 files changed, 8 insertions, 2 deletions

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 09c1eb8b..8e7b8fbf 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -157,7 +157,10 @@ svg {
 }
 
 .nav {
-  padding-top: $spacer;
+  padding-top: $spacer / 4;
+  @include media-breakpoint-up($responsive-layout-bp) {
+    padding-top: $spacer;
+  }
 }
 
 .nav-item__nav {
@@ -246,6 +249,9 @@ svg {
   background-color: $container-bgd;
   transform: translateX(-$navigation-width);
   transition: transform $exit-easing--productive $duration--moderate-02;
+  @include media-breakpoint-down(md) {
+    z-index: $zindex-fixed + 2;
+  }
 
   &.open {
     transform: translateX(0);
@@ -264,7 +270,7 @@ svg {
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: $zindex-fixed - 1;
+  z-index: $zindex-fixed + 1;
   background-color: $black;
   opacity: 0.5;