improved animations for mobile menu

public/css/style.less

@@ -538,6 +538,8 @@ body .navbar .nodebb-inline-block {
 }
 
 #mobile-menu, #mobile-menu-overlay {
+	z-index: 999;
+
 	@media (min-width: 979px) 
 	{
 		display: none !important;
@@ -630,11 +632,10 @@ body .navbar .nodebb-inline-block {
 		transition: margin-top 250ms ease;
 
 		margin-top: 20%;
-		opacity: 0;
+		
 
 		&.menu-visible {
 			margin-top: 0%;
-			opacity: 1;
 		}
 
 		i {

public/src/modules/mobileMenu.js

@@ -41,10 +41,10 @@ define(function() {
 			icon.src = 'category/' + category.slug;
 
 			icon.onclick = function() {
-				jQuery(overlay).toggleClass('menu-visible');
+				jQuery('.mobile-menu-icon').toggleClass('menu-visible');
 
 				setTimeout(function() {
-					jQuery('.mobile-menu-icon').toggleClass('menu-visible');
+					jQuery(overlay).toggleClass('menu-visible');
 				}, 200);
 
 				ajaxify.go(this.src);