diff --git a/public/css/style.less b/public/css/style.less
index 658be046d5..5b5216cba7 100644
--- a/public/css/style.less
+++ b/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 {
diff --git a/public/src/modules/mobileMenu.js b/public/src/modules/mobileMenu.js
index 5a82befdce..7f5183348f 100644
--- a/public/src/modules/mobileMenu.js
+++ b/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);