diff --git a/src/web/landing/assets/app.js b/src/web/landing/assets/app.js
index c7a06e81f..5dc42f649 100644
--- a/src/web/landing/assets/app.js
+++ b/src/web/landing/assets/app.js
@@ -1,3 +1,4 @@
 import '@fontsource-variable/cabin/index.min.css';
 import 'highlight.js/styles/github-dark.min.css';
+import '@oddbird/popover-polyfill';
 import './bootstrap.js';
diff --git a/src/web/landing/importmap.php b/src/web/landing/importmap.php
index d0aeb4525..9ab2cd1d9 100644
--- a/src/web/landing/importmap.php
+++ b/src/web/landing/importmap.php
@@ -25,4 +25,16 @@
         'version' => '5.0.17',
         'type' => 'css',
     ],
+
+    /**
+     * On mobile there is a collapsible menu that uses relatively new popover attribute,
+     * but it's not yet available in a firefox browser: https://caniuse.com/?search=popover.
+     * This polyfill will make it work there.
+     *
+     * Once it's available, run 'bin/console importmap:remove @oddbird/popover-polyfill'
+     * and remove import from 'landing/assets/app.js'.
+     */
+    '@oddbird/popover-polyfill' => [
+        'version' => '0.3.8',
+    ],
 ];
diff --git a/src/web/landing/templates/base.html.twig b/src/web/landing/templates/base.html.twig
index cf0285b4a..125440cdf 100644
--- a/src/web/landing/templates/base.html.twig
+++ b/src/web/landing/templates/base.html.twig
@@ -29,7 +29,7 @@
                 <img src="{{ asset('images/icons/menu.svg') }}" alt="menu" class="" >
             </button>
 
-            <nav popover id="main-nav" class="relative p-0 m-0 max-sm:top-0 max-sm:right-0 sm:block text-white bg-blue-200 unset">
+            <nav popover id="main-nav" class="max-sm:absolute border-0 p-0 m-0 max-sm:top-0 max-sm:right-0 sm:relative sm:block text-white bg-blue-200 unset">
                 <ul class="sm:flex flex-nowrap whitespace-nowrap">
                     <li class="sm:hidden text-right">
                         <button popovertarget="main-nav" popovertargetaction="hide" class="sm:hidden h-16 pr-4">