diff --git a/src/lib/components/Menu.svelte b/src/lib/components/Menu.svelte
index 7cbe28a2..0daea2bc 100644
--- a/src/lib/components/Menu.svelte
+++ b/src/lib/components/Menu.svelte
@@ -158,15 +158,11 @@
     }
 
     .bottom-logo {
-      display: none;
+      display: block;
       padding-bottom: var(--padding-3x);
 
       color: var(--menu-color);
       text-align: center;
-
-      @media (min-height: 654px) {
-        display: block;
-      }
     }
 
     .logo {
diff --git a/src/lib/styles/global/menu.scss b/src/lib/styles/global/menu.scss
index 106d1a57..359d0a98 100644
--- a/src/lib/styles/global/menu.scss
+++ b/src/lib/styles/global/menu.scss
@@ -8,6 +8,7 @@
 
       button {
         &.menu-collapse {
+          display: flex;
           opacity: 0;
           visibility: hidden;
           transition:
@@ -25,13 +26,7 @@
           min-height: var(--padding-4x);
 
           transform: rotate(0deg);
-
-          display: none;
-
-          // 654px is an empirical value. The same value as in <MenuBackground /> in which we hide the header and footer of the menu according screen size.
-          @media (min-height: 654px) {
-            display: flex;
-          }
+          z-index: calc(var(--menu-z-index) + 2);
         }
 
         &.menu-collapse {