diff --git a/loleaflet/css/device-mobile.css b/loleaflet/css/device-mobile.css
index 4414fd4c5..fe3c688ad 100644
--- a/loleaflet/css/device-mobile.css
+++ b/loleaflet/css/device-mobile.css
@@ -54,3 +54,64 @@ div#w2ui-overlay-actionbar.w2ui-overlay{
 #document-header{
 	display: none !important;
 }
+
+/* Related to menubar.css */
+.document-logo {
+    width: 35px;
+    height: 38px;
+}
+
+#document-titlebar {
+    display: none;
+}
+
+.document-title {
+    display: none;
+}
+
+/* hide the menu in mobile view */
+#main-menu-state:not(:checked) ~ #main-menu {
+    display: none;
+}
+
+.main-menu-btn {
+    display: inline-block;
+}
+
+.main-nav {
+    position: absolute;
+    height: 0;
+    width: 100%;
+    top: 37px; /*set equal to toolbar up's height*/
+    margin: 0;
+    -webkit-overflow-scrolling: touch;
+    overflow: scroll;
+    z-index: 1010;
+    bottom: 34px !important;
+    background-color: #00000050;
+}
+
+#main-menu {
+   position: relative;
+   top: 0;
+   width: 70%;
+   float: right;
+   background-color: white;
+   height: 100%;
+}
+
+.writer-icon-img {
+    background-size: 35px 35px;
+}
+
+.calc-icon-img {
+    background-size: 35px 35px;
+}
+
+.impress-icon-img {
+    background-size: 35px 35px;
+}
+
+#document-name-input {
+    display: none;
+}
diff --git a/loleaflet/css/menubar.css b/loleaflet/css/menubar.css
index 1f52f4048..5e7ab15c5 100644
--- a/loleaflet/css/menubar.css
+++ b/loleaflet/css/menubar.css
@@ -256,65 +256,15 @@
 	background-position: bottom;
 }
 
+/* FIXME remove this @media; but for the moment doing so breaks the cypress
+ * tests.
+ */
 @media (max-width: 767px), (max-device-height: 767px) {
-    .document-logo {
-        width: 35px;
-        height: 38px;
-    }
-
-    #document-titlebar {
-        display: none;
-    }
-
-    .document-title {
-	display: none;
-    }
-
-    /* hide the menu in mobile view */
-    #main-menu-state:not(:checked) ~ #main-menu {
-        display: none;
-    }
-
-    .main-menu-btn {
-        display: inline-block;
-    }
-
     .main-nav {
         position: absolute;
         height: 0;
         width: 100%;
         top: 37px; /*set equal to toolbar up's height*/
-        margin: 0;
-        -webkit-overflow-scrolling: touch;
-        overflow: scroll;
-        z-index: 1010;
-        bottom: 34px !important;
-        background-color: #00000050;
-    }
-
-    #main-menu {
-       position: relative;
-       top: 0;
-       width: 70%;
-       float: right;
-       background-color: white;
-       height: 100%;
-    }
-
-    .writer-icon-img {
-	background-size: 35px 35px;
-    }
-
-    .calc-icon-img {
-	background-size: 35px 35px;
-    }
-
-    .impress-icon-img {
-	background-size: 35px 35px;
-    }
-
-    #document-name-input {
-        display: none;
     }
 }