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
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 09c1eb8..8e7b8fb 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -157,7 +157,10 @@
}
.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 @@
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 @@
bottom: 0;
left: 0;
right: 0;
- z-index: $zindex-fixed - 1;
+ z-index: $zindex-fixed + 1;
background-color: $black;
opacity: 0.5;