diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 1373682d4..f2c6cb6a6 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -588,18 +588,6 @@ body > header,
   }
 }
 
-.menu-button {
-  border: 1px solid;
-  border-radius: $button-radius;
-  color: inherit;
-  padding: 0.6em;
-}
-
-.menu-icon {
-  @include hamburger($color: currentcolor, $color-hover: currentcolor);
-  cursor: inherit;
-}
-
 .dropdown.menu > li {
 
   a {
diff --git a/app/assets/stylesheets/layout/responsive_menu.scss b/app/assets/stylesheets/layout/responsive_menu.scss
new file mode 100644
index 000000000..b30eb060a
--- /dev/null
+++ b/app/assets/stylesheets/layout/responsive_menu.scss
@@ -0,0 +1,17 @@
+[data-responsive-toggle=responsive_menu] {
+  @include breakpoint(medium) {
+    display: none;
+  }
+
+  .menu-button {
+    border: 1px solid;
+    border-radius: $button-radius;
+    color: inherit;
+    padding: 0.6em;
+  }
+
+  .menu-icon {
+    @include hamburger($color: currentcolor, $color-hover: currentcolor);
+    cursor: inherit;
+  }
+}
diff --git a/app/components/layout/responsive_menu_component.html.erb b/app/components/layout/responsive_menu_component.html.erb
index 3a0e6feab..5f0489c05 100644
--- a/app/components/layout/responsive_menu_component.html.erb
+++ b/app/components/layout/responsive_menu_component.html.erb
@@ -1,4 +1,4 @@
-<span data-responsive-toggle="responsive_menu" data-hide-for="medium">
+<span data-responsive-toggle="responsive_menu">
   <button type="button" class="menu-button" data-toggle>
     <span class="menu-icon"></span>
     <%= t("application.menu") %>