diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss
index 5670e3d7..091b0dca 100755
--- a/src/scss/components/_header.scss
+++ b/src/scss/components/_header.scss
@@ -57,7 +57,7 @@ main {
 			top: 0;
 			left: 0;
 			width: 100%;
-			z-index: 95;
+			z-index: 99;
 		}
 
 		@include responsive( $bp_medium ){
diff --git a/src/scss/components/_sidebar-toggle-button.scss b/src/scss/components/_sidebar-toggle-button.scss
index 7e08e7e8..caf566b1 100755
--- a/src/scss/components/_sidebar-toggle-button.scss
+++ b/src/scss/components/_sidebar-toggle-button.scss
@@ -16,11 +16,12 @@
 	}
 
 	&.open {
+		@include animate(0.15s);
 		position: fixed;
 		top: 0;
 		right: 0;
 		bottom: 0;
-		left: 220px;
+		left: 0;
 		background: $overlay_dark;
 		color: $white;
 		z-index: 99;
@@ -28,6 +29,13 @@
 		.open {
 			display: none;
 		}
+
+		.open,
+		.close {
+			position: absolute;
+			top: 20px;
+			left: 235px;
+		}
 	}
 
 	&:not(.open) {
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 7c36a8eb..f9f9ba9e 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -87,6 +87,7 @@ aside{
 	}
 
 	@include responsive( $bp_medium ){
+		@include animate(0.15s);
 		width: 220px;
 		left: -220px;
 		padding-bottom: 0;
@@ -94,7 +95,9 @@ aside{
 		z-index: 100;
 
 		.sidebar-open & {
-			left: 0px;
+			-ms-transform: translate(220px, 0);
+			-webkit-transform: translate(220px, 0);
+			transform: translate(220px, 0);
 		}
 
 		.liner {