diff --git a/app/assets/stylesheets/mobile.scss.erb b/app/assets/stylesheets/mobile.scss.erb
index 64794153..01fa5f61 100644
--- a/app/assets/stylesheets/mobile.scss.erb
+++ b/app/assets/stylesheets/mobile.scss.erb
@@ -229,6 +229,16 @@
   list-style: none;
 }
 
+/*
+ * the mobile menu, even if it's been opened by a user, should
+ * not show up if they resize their browser back to full size
+ */
+@media only screen and (max-width : 504px) {
+  #mobile_menu.visible {
+    display: block;
+  }
+}
+
 li.mobileMenuUser {
   border-bottom: 1px solid #BBB;
 }
diff --git a/frontend/src/Metamaps/Mobile.js b/frontend/src/Metamaps/Mobile.js
index dc4088c0..99ccc5ee 100644
--- a/frontend/src/Metamaps/Mobile.js
+++ b/frontend/src/Metamaps/Mobile.js
@@ -22,7 +22,7 @@ const Mobile = {
     self.toggleMenu()
   },
   toggleMenu: function() {
-    $('#mobile_menu').toggle()
+    $('#mobile_menu').toggleClass('visible')
   },
   titleClick: function() {
     if (Active.Map) {