diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html
index 8bf787fb5..0071226d0 100644
--- a/extensions/odoo_theme/layout.html
+++ b/extensions/odoo_theme/layout.html
@@ -54,7 +54,8 @@
 {% endblock %}
 
 {% block header %}
-    <nav id="o_main_toctree" class="o_side_nav border-end">
+    {# shown when js has properly set all the classes on the toc elements #}
+    <nav id="o_main_toctree" class="o_side_nav border-end" hidden>
         {% include "layout_templates/menu.html" %}
     </nav>
     <header class="o_main_header border-bottom">
diff --git a/extensions/odoo_theme/static/js/menu.js b/extensions/odoo_theme/static/js/menu.js
index d1a0b20e9..6e437dd58 100644
--- a/extensions/odoo_theme/static/js/menu.js
+++ b/extensions/odoo_theme/static/js/menu.js
@@ -1,3 +1,4 @@
+/* global _prepareAccordion */ //see utils.js
 (function ($) {
 
     document.addEventListener('DOMContentLoaded', () => {
@@ -9,6 +10,9 @@
         // Allow to respectively highlight and expand the TOC entries and their related TOC
         // entry list whose page is displayed.
         _flagActiveTocEntriesAndLists();
+
+        // Show hidden menu when the css classes have been properly specified
+        this.navigationMenu.removeAttribute('hidden');
     });
 
     /**
diff --git a/extensions/odoo_theme/static/js/page_toc.js b/extensions/odoo_theme/static/js/page_toc.js
index 82a3fe610..c18bc6f0e 100644
--- a/extensions/odoo_theme/static/js/page_toc.js
+++ b/extensions/odoo_theme/static/js/page_toc.js
@@ -1,3 +1,4 @@
+/* global _prepareAccordion */ //see utils.js
 (function ($) {
 
     // Customize the page TOC