diff --git a/docs/mesa3d_theme/layout.html b/docs/mesa3d_theme/layout.html
index a80aeb2b0e9..a56685b9625 100644
--- a/docs/mesa3d_theme/layout.html
+++ b/docs/mesa3d_theme/layout.html
@@ -33,11 +33,11 @@
         </a>
       </div>
 
-      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <button id="navbar-button" class="d-none navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+      <div class="navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav ms-auto">
 
           <li class="nav-item">
@@ -59,6 +59,10 @@
         </ul>
       </div>
     </div>
+    <script>
+      document.getElementById('navbar-button').classList.remove('d-none');
+      document.getElementById('navbarSupportedContent').classList.add('collapse');
+    </script>
   </nav>
 {% endblock %}