diff --git a/_includes/head.html b/_includes/head.html
index a770fc39ae..c0f8ac0d50 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -7,7 +7,6 @@
     <script data-cfasync="false" src="/js/theme.js"></script>
     <link rel="stylesheet" href="/css/dark-theme.css?_={{ site.time | date: '%s' }}">
     <link rel="stylesheet" href="/css/style.css?_={{ site.time | date: '%s' }}">
-    <link rel="stylesheet" href="/css/dropit.css">
     <link rel="stylesheet" href="/css/prism.css">
     <link rel="stylesheet" href="/css/font-awesome.min.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;amp;subset=latin,latin-ext">
@@ -32,8 +31,8 @@
     <script data-cfasync="false" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script data-cfasync="false" src="/js/ismobile.js"></script>
     <script data-cfasync="false" src="/js/app.js"></script>
-    <script data-cfasync="false" src="/js/retina.js"></script>
-    <script data-cfasync="false" src="/js/dropit.js"></script>
+    <script data-cfasync="false" defer src="/js/menu.js"></script>
+    <script data-cfasync="false" src="/js/retina.js"></script>  
     <script data-cfasync="false" src="/js/prism.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 
diff --git a/_includes/header/header-de.html b/_includes/header/header-de.html
index ad81d59dd5..2c561d176c 100644
--- a/_includes/header/header-de.html
+++ b/_includes/header/header-de.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Einführung</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Einführung</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Installation
@@ -40,15 +39,12 @@
                           <li>
                             <a href="/{{ page.lang }}/starter/faq.html">
                               Häufig gestellte Fragen</a>
-</li>
+                          </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Leitfaden</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Leitfaden</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Middleware schreiben</a>
@@ -70,13 +66,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Datenbankintegration</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API-Referenz</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API-Referenz</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -86,31 +79,23 @@
                           <li><a href="/2x/">2.x (veraltet)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Themen für Fortgeschrittene</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Themen für Fortgeschrittene</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Template-Engines</a>
                           </li>
-
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Sicherheitsupdates</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-security.html">Sicherheitsspezifische Best Practices</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Leistungsspezifische Best Practices</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ressourcen</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ressourcen</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">Glossar</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
@@ -118,13 +103,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">Community</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-en.html b/_includes/header/header-en.html
index 239db00a60..998494eea1 100644
--- a/_includes/header/header-en.html
+++ b/_includes/header/header-en.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Getting started</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Getting started</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Installing
@@ -48,13 +47,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guide</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guide</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Writing middleware</a>
@@ -78,13 +74,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Database integration</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API reference</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API reference</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -94,13 +87,10 @@
                           <li><a href="/2x/">2.x (deprecated)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Advanced topics</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Advanced topics</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Building template engines</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Security updates</a>
@@ -112,13 +102,10 @@
                           <li><a href="/{{ page.lang }}/advanced/healthcheck-graceful-shutdown.html">Health checks &  shutdown</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/resources/community.html">Community</a>
                           </li>
@@ -138,14 +125,11 @@
                             <a href="/{{ page.lang }}/changelog/4x.html">Release Change Log</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
           <li><a href="/{{ page.lang }}/support" id="support-menu"{% if page.menu == 'support' %} class="active"{% endif %}>Support</a></li>
-          <li>
-              <ul id="blog-menu" class="menu">
-                  <li><a href="{{site.posts.first.url}}"{% if page.menu == 'blog' %} class="active"{% endif %}>Blog</a>
-                      <ul>
+          <li id="blog-menu" class="submenu">
+                  <a href="{{site.posts.first.url}}"{% if page.menu == 'blog' %} class="active"{% endif %}>Blog</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="{{site.posts.first.url}}">Latest post</a> 
                           </li>
@@ -157,23 +141,10 @@
                           </li>
                       </ul>
                   </li>
-              </ul>
-          </li>
-          <!--
-          <li>
-              <ul id="changelog-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/changelog/4x.html"{% if page.menu == 'changelog' %} class="active"{% endif %}>Changelog</a>
-                      <ul>
-                          <li><a href="/{{ page.lang }}/changelog/4x.html">4.x</a></li>
-                      </ul>
-                  </li>
-              </ul>
-          </li>
-        -->
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
   </div>
-</header>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
+  </div>
+</header>
\ No newline at end of file
diff --git a/_includes/header/header-es.html b/_includes/header/header-es.html
index 4e0cd288f7..58e8fec660 100644
--- a/_includes/header/header-es.html
+++ b/_includes/header/header-es.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Inicio</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Cómo empezar</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Cómo empezar</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Instalación
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guía</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guía</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Direccionamiento</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Escritura de middleware</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Integración de la base de datos</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Referencia de API</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Referencia de API</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x (en desuso)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Temas avanzados</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Temas avanzados</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Motores de plantilla</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Actualizaciones de seguridad</a>
@@ -102,15 +92,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Mejores prácticas de rendimiento</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Recursos</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Recursos</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">Glosario</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
@@ -118,13 +104,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">Comunidad</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div> 
   </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
+  </div> 
 </header>
diff --git a/_includes/header/header-fr.html b/_includes/header/header-fr.html
index 9239faee4c..62c0db4906 100644
--- a/_includes/header/header-fr.html
+++ b/_includes/header/header-fr.html
@@ -5,13 +5,12 @@
   <section id="logo"><a href="/" class="express">Express</a>
   </section>
   <div id="navbar">
+      <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
-          <input id="q" placeholder="🔎 search">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Accueil</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Mise en route</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Mise en route</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Installation
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guide</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guide</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Routage</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Ecriture de middleware</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Intégration de bases de données</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Référence de l'API</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Référence de l'API</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x (obsolète)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Rubriques avancées</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Rubriques avancées</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Moteurs de modèles</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Mises à jour de sécurité</a>
@@ -104,13 +94,10 @@
                           </li>
 
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ressources</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ressources</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">Glossaire</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
@@ -118,13 +105,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">Communauté</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div> 
   </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
+  </div> 
 </header>
diff --git a/_includes/header/header-id.html b/_includes/header/header-id.html
index 1d728fe733..a115d6dc5e 100644
--- a/_includes/header/header-id.html
+++ b/_includes/header/header-id.html
@@ -8,10 +8,9 @@
         <input id="q" placeholder="🔎 search">
         <ul id="navmenu">
             <li><a href="/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
-            <li>
-                <ul id="getting-started-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Mulai</a>
-                        <ul>
+            <li id="getting-started-menu" class="submenu">
+                    <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Mulai</a>
+                        <ul class="submenu-content">
                             <li>
                               <a href="/{{ page.lang }}/starter/installing.html">
                                 Menginstal
@@ -48,13 +47,10 @@
                               </a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <li>
-                <ul id="guide-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Panduan</a>
-                        <ul>
+            <li id="guide-menu" class="submenu">
+                    <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Panduan</a>
+                        <ul class="submenu-content">
                             <li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
                             </li>
                             <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Membuat middleware</a>
@@ -78,13 +74,10 @@
                             <li><a href="/{{ page.lang }}/guide/database-integration.html">Integrasi Database</a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <li>
-                <ul id="application-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Referensi API</a>
-                        <ul>
+            <li id="application-menu" class="submenu">
+                    <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Referensi API</a>
+                        <ul class="submenu-content">
                             <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                             </li>
                             <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -94,13 +87,10 @@
                             <li><a href="/2x/">2.x (deprecated)</a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <li>
-                <ul id="advanced-topics-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Topik lanjutan</a>
-                        <ul>
+            <li id="advanced-topics-menu" class="submenu">
+                    <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Topik lanjutan</a>
+                        <ul class="submenu-content">
                             <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Membangun template engines</a>
                             </li>
                             <li><a href="/{{ page.lang }}/advanced/security-updates.html">Security updates</a>
@@ -112,13 +102,10 @@
                             <li><a href="/{{ page.lang }}/advanced/healthcheck-graceful-shutdown.html">Health checks & shutdown</a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <li>
-                <ul id="resources-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
-                        <ul>
+            <li id="resources-menu" class="submenu">
+                    <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
+                        <ul class="submenu-content">
                             <li>
                               <a href="/{{ page.lang }}/resources/community.html">Community</a>
                             </li>
@@ -138,25 +125,12 @@
                               <a href="/{{ page.lang }}/changelog/4x.html">Release Change Log</a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <!--
-            <li>
-                <ul id="changelog-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/changelog/4x.html"{% if page.menu == 'changelog' %} class="active"{% endif %}>Changelog</a>
-                        <ul>
-                            <li><a href="/{{ page.lang }}/changelog/4x.html">4.x</a></li>
-                        </ul>
-                    </li>
-                </ul>
-            </li>
-          -->
         </ul>
-        <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-          <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-          <span class="sun-icon hidden-light"></span>
-        </div>
+    </div>
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+      <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+      <span class="sun-icon hidden-light"></span>
     </div>
   </header>
   
\ No newline at end of file
diff --git a/_includes/header/header-it.html b/_includes/header/header-it.html
index d003fcb943..db0c91a349 100644
--- a/_includes/header/header-it.html
+++ b/_includes/header/header-it.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Home</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Introduzione</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Introduzione</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Installazione</a>
@@ -40,13 +39,10 @@
                               FAQ</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guida</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guida</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Scrittura del middleware</a>
@@ -68,13 +64,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Integrazione database</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Riferimento API</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Riferimento API</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -84,13 +77,10 @@
                           <li><a href="/2x/">2.x (deprecato)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Argomenti avanzati</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Argomenti avanzati</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Motori di template</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Aggiornamenti sulla sicurezza</a>
@@ -99,15 +89,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Best practice sulle prestazioni</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Risorse</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Risorse</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">Glossario</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
@@ -115,13 +101,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">Community</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div> 
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-ja.html b/_includes/header/header-ja.html
index 3e874c3095..1f66383f83 100644
--- a/_includes/header/header-ja.html
+++ b/_includes/header/header-ja.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>ホーム</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>概説</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>概説</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               インストール
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>ガイド</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>ガイド</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">ルーティング</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">ミドルウェアの作成</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">データベースの統合</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API リファレンス</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API リファレンス</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x (非推奨)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>高度なトピック</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>高度なトピック</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">テンプレート・エンジン</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">セキュリティー更新</a>
@@ -102,15 +92,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">パフォーマンスに関するベスト・プラクティス</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>リソース</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>リソース</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">用語集</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">ミドルウェア</a>
@@ -118,13 +104,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">コミュニティー</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div> 
   </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
+  </div> 
 </header>
diff --git a/_includes/header/header-ko.html b/_includes/header/header-ko.html
index 346bd67e37..e7c66fe906 100644
--- a/_includes/header/header-ko.html
+++ b/_includes/header/header-ko.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>홈</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>시작하기</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>시작하기</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               설치
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>안내서</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>안내서</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">라우팅</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">미들웨어 작성</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">데이터베이스 통합</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API 참조</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API 참조</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x(더 이상 사용되지 않음)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>고급 주제</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>고급 주제</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">템플리트 엔진</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">보안 업데이트</a>
@@ -102,15 +92,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">성능 우수 사례</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>자원</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>자원</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">용어집</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">미들웨어</a>
@@ -118,13 +104,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">커뮤니티</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div> 
   </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
+  </div> 
 </header>
diff --git a/_includes/header/header-pt-br.html b/_includes/header/header-pt-br.html
index ae43c40698..62a64faa25 100644
--- a/_includes/header/header-pt-br.html
+++ b/_includes/header/header-pt-br.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Página Inicial</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Introdução</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Introdução</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Instalação
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guia</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Guia</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Roteamento</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Escrevendo o middleware</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Integração de Banco de dados</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Referência da API</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Referência da API</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x (descontinuada)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Tópicos Avançados</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Tópicos Avançados</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Mecanismos de modelo</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Atualizações de segurança</a>
@@ -102,15 +92,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Melhores práticas de desempenho</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Recursos</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Recursos</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">Glossário</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
@@ -118,13 +104,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">Comunidade</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-ru.html b/_includes/header/header-ru.html
index 112b00434c..049d217a89 100644
--- a/_includes/header/header-ru.html
+++ b/_includes/header/header-ru.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Главная</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Начало работы</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Начало работы</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Установка
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Руководство</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Руководство</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Маршрутизация</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Написание кода промежуточных обработчиков</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Интеграция с базами данных</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x (устарел)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Расширенные возможности</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Расширенные возможности</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Шаблонизаторы</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Обновления системы безопасности</a>
@@ -102,15 +92,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Лучшие практические методы улучшения производительности</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ресурсы</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ресурсы</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">Глоссарий</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">Промежуточный обработчик</a>
@@ -118,13 +104,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">Сообщество</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-sk.html b/_includes/header/header-sk.html
index 1a21a62435..772560507f 100644
--- a/_includes/header/header-sk.html
+++ b/_includes/header/header-sk.html
@@ -8,10 +8,9 @@
         <input id="q" placeholder="🔎 search">
         <ul id="navmenu">
             <li><a href="/{{ page.lang }}/" id="home-menu" {% if page.menu == 'home' %} class="active" {% endif %}>Domov</a></li>
-            <li>
-                <ul id="getting-started-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/starter/installing.html" {% if page.menu == 'starter' %} class="active" {% endif %}>Začíname</a>
-                        <ul>
+            <li id="getting-started-menu" class="submenu">
+                    <a href="/{{ page.lang }}/starter/installing.html" {% if page.menu == 'starter' %} class="active" {% endif %}>Začíname</a>
+                        <ul class="submenu-content">
                             <li>
                                 <a href="/{{ page.lang }}/starter/installing.html">
                               Inštalácia
@@ -43,13 +42,10 @@
                             </a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <li>
-                <ul id="guide-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/guide/routing.html" {% if page.menu == 'guide' %} class="active" {% endif %}>Príručka</a>
-                        <ul>
+            <li id="guide-menu" class="submenu">
+                    <a href="/{{ page.lang }}/guide/routing.html" {% if page.menu == 'guide' %} class="active" {% endif %}>Príručka</a>
+                        <ul class="submenu-content">
                             <li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
                             </li>
                             <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Tvorba middleware</a>
@@ -71,13 +67,10 @@
                             <li><a href="/{{ page.lang }}/guide/database-integration.html">Integrácia s databázou</a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <li>
-                <ul id="application-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/5x/api.html" {% if page.menu == 'api' %} class="active" {% endif %}>API referenčná príručka</a>
-                        <ul>
+            <li id="application-menu" class="submenu">
+                    <a href="/{{ page.lang }}/5x/api.html" {% if page.menu == 'api' %} class="active" {% endif %}>API referenčná príručka</a>
+                        <ul class="submenu-content">
                             <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                             </li>
                             <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                             <li><a href="/2x/">2.x (zastaralé)</a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <li>
-                <ul id="advanced-topics-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html" {% if page.menu == 'advanced' %} class="active" {% endif %}>Pokročilé témy</a>
-                        <ul>
+            <li id="advanced-topics-menu" class="submenu">
+                    <a href="/{{ page.lang }}/advanced/developing-template-engines.html" {% if page.menu == 'advanced' %} class="active" {% endif %}>Pokročilé témy</a>
+                        <ul class="submenu-content">
                             <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Templatovacie enginy</a>
                             </li>
                             <li><a href="/{{ page.lang }}/advanced/security-updates.html">Security - aktualizácie</a>
@@ -103,13 +93,10 @@
                             <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Výkonnosť - osvedčené postupy</a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
-            <li>
-                <ul id="resources-menu" class="menu">
-                    <li><a href="/{{ page.lang }}/resources/glossary.html" {% if page.menu == 'resources' %} class="active" {% endif %}>Zdroje</a>
-                        <ul>
+            <li id="resources-menu" class="submenu">
+                    <a href="/{{ page.lang }}/resources/glossary.html" {% if page.menu == 'resources' %} class="active" {% endif %}>Zdroje</a>
+                        <ul class="submenu-content">
                             <li><a href="/{{ page.lang }}/resources/glossary.html">Glosár</a>
                             </li>
                             <li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
@@ -117,13 +104,11 @@
                             <li><a href="/{{ page.lang }}/resources/community.html">Komunita</a>
                             </li>
                         </ul>
-                    </li>
-                </ul>
             </li>
         </ul>
-        <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-            <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-            <span class="sun-icon hidden-light"></span>
-          </div>
+    </div>
+    <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+        <span class="sun-icon hidden-light"></span>
     </div>
 </header>
diff --git a/_includes/header/header-th.html b/_includes/header/header-th.html
index f8b0f63052..4fda2d0469 100644
--- a/_includes/header/header-th.html
+++ b/_includes/header/header-th.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>หน้าแรก</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>เริ่มกันเลย</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>เริ่มกันเลย</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               การติดตั้ง
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>แนะนำ</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>แนะนำ</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">การใช้งานเราเตอร์</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">การเขียนมิดเดิลแวร์</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">การเชื่อมโยงกับฐานข้อมูล</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>การอ้างอิง API</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>การอ้างอิง API</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x (เลิกใช้)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>หัวข้อขั้นสูง</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>หัวข้อขั้นสูง</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">เครื่องสร้างโครงแบบ</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">ความปลอดภัยล่าสุด</a>
@@ -103,13 +93,10 @@
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">แนวทางปฏิบัติประสิทธิภาพ</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>แหล่งข้อมูลอื่น</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>แหล่งข้อมูลอื่น</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/resources/community.html">ชุมชน</a>
                           </li>
@@ -129,24 +116,11 @@
                             <a href="/{{ page.lang }}/changelog/4x.html">บันทึกการเปลี่ยนแปลง</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <!--
-          <li>
-              <ul id="changelog-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/changelog/4x.html"{% if page.menu == 'changelog' %} class="active"{% endif %}>Changelog</a>
-                      <ul>
-                          <li><a href="/{{ page.lang }}/changelog/4x.html">4.x</a></li>
-                      </ul>
-                  </li>
-              </ul>
-          </li>
-        -->
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-tr.html b/_includes/header/header-tr.html
index 979eace653..db2a4c7dad 100644
--- a/_includes/header/header-tr.html
+++ b/_includes/header/header-tr.html
@@ -1,7 +1,4 @@
 <header>
-  <div style="text-align: center; background: #010101; color: #f1f1f1; padding: 16px; font-size: 16px; width: 100vw">
-    Black Lives Matter. <a style="color: #5E80F7; text-decoration: none;" href="https://support.eji.org/give/153413/#!/donation/checkout">Support the Equal Justice Initiative</a>.
-  </div>
   <div id="mobile-menu">
       <div id="nav-button" class="fa fa-bars fa-2x button"></div>
   </div>
@@ -11,10 +8,9 @@
       <input id="q" placeholder="🔎 search" />
       <ul id="navmenu">
           <li><a href="/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Anasayfa</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Buradan Başlayın</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Buradan Başlayın</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Kurulum
@@ -46,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Kılavuz</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Kılavuz</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Yönlendirme</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">
@@ -75,13 +68,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Database Entegrasyonu</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API Kaynak</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API Kaynak</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -91,13 +81,10 @@
                           <li><a href="/2x/">2.x (Kullanımdan kaldırıldı)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Gelişmiş konular</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Gelişmiş konular</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Şablon motorları</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Gğvenlik güncellemeleri</a>
@@ -107,13 +94,10 @@
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">En iyi performans uygulamaları</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Kaynaklar</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Kaynaklar</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/resources/community.html">Topluluk</a>
                           </li>
@@ -133,24 +117,11 @@
                             <a href="/{{ page.lang }}/changelog/4x.html">Sürüm Notları</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
-          </li>
-          <!--
-          <li>
-              <ul id="changelog-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/changelog/4x.html"{% if page.menu == 'changelog' %} class="active"{% endif %}>Changelog</a>
-                      <ul>
-                          <li><a href="/{{ page.lang }}/changelog/4x.html">4.x</a></li>
-                      </ul>
-                  </li>
-              </ul>
           </li>
-        -->
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-uk.html b/_includes/header/header-uk.html
index edd080c4c2..26e35847b5 100644
--- a/_includes/header/header-uk.html
+++ b/_includes/header/header-uk.html
@@ -5,12 +5,12 @@
   <section id="logo"><a href="/" class="express">Express</a>
   </section>
   <div id="navbar">
+      <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Початкова сторінка</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Ознайомлення</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Ознайомлення</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               Встановлення
@@ -42,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Гід</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Гід</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Маршрутизація</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Створення проміжних обробників</a>
@@ -70,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Інтеграція з базами даних</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Довідник API</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>Довідник API</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -84,13 +78,10 @@
                           <li><a href="/{{ page.lang }}/3x/api.html">3.x (застаріла)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Додаткові можливості</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Додаткові можливості</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Шаблонізатори</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Оновлення безпеки</a>
@@ -99,15 +90,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Кращі практики продуктивності</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ресурси</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Ресурси</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">Голосарій</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">Проміжний обробник</a>
@@ -115,13 +102,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">Спільнота</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-uz.html b/_includes/header/header-uz.html
index 13e4527a13..1cd4b4203d 100644
--- a/_includes/header/header-uz.html
+++ b/_includes/header/header-uz.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search" />
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>Bosh sahifa</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Boshlang'ich ishlar</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>Boshlang'ich ishlar</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                              O'rnatish 
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Qo'llanma</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>Qo'llanma</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">Routing</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">Middleware yozish</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">Ma'lumotlar omboriga ulash</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API qo'llanma</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API qo'llanma</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x (eskirgan)</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Advanced topics</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>Advanced topics</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">Template engines</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">Security updates</a>
@@ -102,15 +92,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">Performance best practices</a>
                           </li>
-
-                      </ul>
-                  </li>
-              </ul>
+                      </ul>                  
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>Resources</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">Glossary</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">Middleware</a>
@@ -118,13 +104,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">Community</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-zh-cn.html b/_includes/header/header-zh-cn.html
index 99e5c3c07d..4b74a7ba22 100644
--- a/_includes/header/header-zh-cn.html
+++ b/_includes/header/header-zh-cn.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>主页</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>入门</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>入门</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               安装
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>指南</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>指南</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">路由</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">编写中间件</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">数据库集成</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API 参考</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API 参考</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x（不推荐）</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>高级主题</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>高级主题</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">模板引擎</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">安全更新</a>
@@ -102,15 +92,11 @@
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">性能最佳实践</a>
                           </li>
-
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>资源</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>资源</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">词汇表</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">中间件</a>
@@ -118,13 +104,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">社区</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/_includes/header/header-zh-tw.html b/_includes/header/header-zh-tw.html
index 066976ffca..f1326c4062 100644
--- a/_includes/header/header-zh-tw.html
+++ b/_includes/header/header-zh-tw.html
@@ -8,10 +8,9 @@
       <input id="q" placeholder="🔎 search">
       <ul id="navmenu">
           <li><a href="/{{ page.lang }}/" id="home-menu"{% if page.menu == 'home' %} class="active"{% endif %}>首頁</a></li>
-          <li>
-              <ul id="getting-started-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>入門</a>
-                      <ul>
+          <li id="getting-started-menu" class="submenu">
+                  <a href="/{{ page.lang }}/starter/installing.html"{% if page.menu == 'starter' %} class="active"{% endif %}>入門</a>
+                      <ul class="submenu-content">
                           <li>
                             <a href="/{{ page.lang }}/starter/installing.html">
                               安裝
@@ -43,13 +42,10 @@
                             </a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="guide-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>手冊</a>
-                      <ul>
+          <li id="guide-menu" class="submenu">
+                  <a href="/{{ page.lang }}/guide/routing.html"{% if page.menu == 'guide' %} class="active"{% endif %}>手冊</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/guide/routing.html">路由</a>
                           </li>
                           <li><a href="/{{ page.lang }}/guide/writing-middleware.html">撰寫中介軟體</a>
@@ -71,13 +67,10 @@
                           <li><a href="/{{ page.lang }}/guide/database-integration.html">資料庫整合</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="application-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API 參照</a>
-                      <ul>
+          <li id="application-menu" class="submenu">
+                  <a href="/{{ page.lang }}/5x/api.html"{% if page.menu == 'api' %} class="active"{% endif %}>API 參照</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/5x/api.html">5.x</a>
                           </li>
                           <li><a href="/{{ page.lang }}/4x/api.html">4.x</a>
@@ -87,13 +80,10 @@
                           <li><a href="/2x/">2.x（已淘汰）</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="advanced-topics-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>進階主題</a>
-                      <ul>
+          <li id="advanced-topics-menu" class="submenu">
+                  <a href="/{{ page.lang }}/advanced/developing-template-engines.html"{% if page.menu == 'advanced' %} class="active"{% endif %}>進階主題</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/advanced/developing-template-engines.html">範本引擎</a>
                           </li>
                           <li><a href="/{{ page.lang }}/advanced/security-updates.html">安全更新</a>
@@ -103,13 +93,10 @@
                           <li><a href="/{{ page.lang }}/advanced/best-practice-performance.html">效能最佳作法</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
-          <li>
-              <ul id="resources-menu" class="menu">
-                  <li><a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>資源</a>
-                      <ul>
+          <li id="resources-menu" class="submenu">
+                  <a href="/{{ page.lang }}/resources/glossary.html"{% if page.menu == 'resources' %} class="active"{% endif %}>資源</a>
+                      <ul class="submenu-content">
                           <li><a href="/{{ page.lang }}/resources/glossary.html">名詞解釋</a>
                           </li>
                           <li><a href="/{{ page.lang }}/resources/middleware.html">中介軟體</a>
@@ -117,13 +104,11 @@
                           <li><a href="/{{ page.lang }}/resources/community.html">社群</a>
                           </li>
                       </ul>
-                  </li>
-              </ul>
           </li>
       </ul>
-      <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
-        <i class="fa fa-moon-o fa-2x hidden-dark"></i>
-        <span class="sun-icon hidden-light"></span>
-      </div>
+  </div>
+  <div id="theme-icon-container" class="theme-toggle default-theme" title="toggle darkmode">
+    <i class="fa fa-moon-o fa-2x hidden-dark"></i>
+    <span class="sun-icon hidden-light"></span>
   </div>
 </header>
diff --git a/css/dark-theme.css b/css/dark-theme.css
index 8e29df425e..88b4a362f1 100644
--- a/css/dark-theme.css
+++ b/css/dark-theme.css
@@ -24,9 +24,6 @@
 }
 #theme-icon-container {
   position: relative;
-  float: right;
-  color: white;
-  min-width: 50px;
   color: black;
 }
 #theme-icon-container i {
@@ -74,26 +71,46 @@ html.dark-mode #logo > a {
   color: var(--dark_main_text);
 }
 /* navbar links/drop down menu links */
-html.dark-mode #navbar ul#navmenu li a,
-html.dark-mode #navbar ul#navmenu li.dropit-trigger a {
+html.dark-mode #navbar ul#navmenu li a {
   color: var(--dark_main_text);
 }
 /* first drop down link - some js is adding current class */
 html.dark-mode #navbar ul#navmenu li a.current {
   background: transparent;
 }
-html.dark-mode #navbar ul#navmenu li a.current:hover {
+html.dark-mode #navbar ul#navmenu li a.current:hover,
+html.dark-mode .submenu-content a:hover {
   background: var(--dark_hover);
 }
-html.dark-mode .menu ul.dropit-submenu {
-  background: var(--dark_bg);
+
+html.dark-mode #navmenu > li {
+  background: var(--second_dark_bg);
+}
+
+html.dark-mode #navbar #q {
+  border-color: #979797;
+}
+
+html.dark-mode #navbar .algolia-autocomplete #q:focus-visible,
+html.dark-mode #navbar .algolia-autocomplete #q:focus {
+  border-color: var(--dark_border);
 }
+
 /* drop down menu links  */
-html.dark-mode #navbar .menu ul.dropit-submenu a:hover {
+
+html.dark-mode #navbar #navmenu li ul {
+  background: var(--second_dark_bg);
+}
+
+html.dark-mode #navbar .submenu-content li a:hover {
   background: var(--dark_hover);
+  color: var(--dark_main_text);
 }
-html.dark-mode #navbar #navmenu li {
-  background: var(--second_dark_bg);
+
+@media all and (max-width: 1110px) {
+  html.dark-mode #navbar #navmenu li ul {
+    background: var(--main_dark_bg);
+  }
 }
 /* search bar */
 html.dark-mode #navbar > span.algolia-autocomplete > input {
@@ -132,20 +149,6 @@ html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input::placehold
 html.dark-mode div#overlay {
   opacity: 0.5;
 }
-@media (max-width: 899px) {
-  #theme-icon-container {
-    bottom: 35px;
-  }
-  /* mobile menu main links hover */
-  html.dark-mode div#navbar ul#navmenu .dropit-trigger:hover {
-    background: var(--dark_hover);
-  }
-    /* mobile menu inner links hover */
-  html.dark-mode div#navbar .menu ul.dropit-submenu a:hover {
-    background: var(--second_dark_hover);
-    color: var(--dark_main_text) !important;
-  }
-}
 
 html.dark-mode .doc-box.doc-info pre.language-javascript {
   background: var(--main_dark_bg);
@@ -280,4 +283,4 @@ html.dark-mode #blog-side-menu > li > a{
 
 html.dark-mode pre code {
   background-color: inherit;
-} 
\ No newline at end of file
+} 
diff --git a/css/dropit.css b/css/dropit.css
deleted file mode 100644
index 2cde3fc6a4..0000000000
--- a/css/dropit.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * Dropit v1.1.0
- * http://dev7studios.com/dropit
- *
- * Copyright 2012, Dev7studios
- * Free to use and abuse under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- */
-
-/* These styles assume you are using ul and li */
-.dropit {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.dropit .dropit-trigger {
-  position: relative;
-  margin-bottom: 6px;
-}
-
-.dropit .dropit-submenu {
-  position: absolute;
-  top: 100%;
-  left: 0; /* dropdown left or right */
-  z-index: 1000;
-  display: none;
-  min-width: 215px;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.dropit .dropit-open .dropit-submenu { display: block; }
diff --git a/css/sk.css b/css/sk.css
index 6959da6c31..1b920cecdf 100644
--- a/css/sk.css
+++ b/css/sk.css
@@ -15,7 +15,3 @@
 #callout5 {top: 170px;}
 
 #callout6 {top: 195px;}
-
-.dropit .dropit-submenu {
-  min-width: 250px;
-}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 00872c791f..65a451b5e1 100644
--- a/css/style.css
+++ b/css/style.css
@@ -29,6 +29,10 @@ body {
   color: #555;
 }
 
+body.no-scroll{
+  overflow: hidden;
+}
+
 h1 {
   font-size: 30px;
   line-height: 36px;
@@ -251,12 +255,7 @@ a {
 /* logo */
 
 #logo {
-  position: fixed;
-  top: 2px;
-  margin: 0;
-  padding: 10px 25px;
   width: auto;
-  border-left: none;
   z-index: 1;
 }
 
@@ -326,6 +325,10 @@ header {
   background: #eee;
   width: 100%;
   height: 57px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-inline: 45px;
   z-index: 100;
   border-bottom: 1px solid #ddd;
 }
@@ -599,22 +602,14 @@ html[xmlns] .clearfix {
 .button {
   display: block;
   padding: 3px 5px;
-  border: 1px solid #ccc;
   border-radius: 3px;
   cursor: pointer;
-  color: #555;
+  color: var(--box-fg);
 }
 
 #mobile-menu {
   display: none;
   position: relative;
-  top: 9px;
-  left: 0;
-}
-
-#nav-button {
-  position: absolute;
-  left: 16px;
 }
 
 pre, code {
@@ -681,21 +676,13 @@ footer {
 /* navigation */
 
 #navbar {
-  padding-left: 5%;
-  max-width: 1000px;
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-  align-items: flex-start;
-  top: 15px;
-  box-sizing: content-box;
   line-height: 30px;
+  display: flex;
+  align-items: center;
 }
 
 #navbar a {
   color: #666;
-  padding-left: 20px;
-  -webkit-font-smoothing: subpixel-antialiased;
 }
 
 #navbar a.active {
@@ -703,47 +690,70 @@ footer {
   color: #353535;
 }
 
+#navbar ul {
+  list-style: none;
+}
+
+#navmenu {
+  display: flex;
+  gap: 20px;
+}
+
 
 /* dropdown menu */
 
-#navmenu {
-  padding: 0;
-  margin: 0;
-  right: 0px;
-  z-index: 1000;
-  margin-right: 15px;
+.submenu {
+  position: relative;
+  list-style: none;
 }
 
-#navmenu > li {
+.submenu-content {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translate(-50%);
+  margin: auto;
+  box-shadow: 0px 1px 3px #00000026;
+  z-index: 1000;
+  min-width: 230px;
+  width: fit-content;
+  background-color: #fcfcfa;
+  border: 1px solid #b2b2b2;
+  border-radius: 12px;
   list-style: none;
   padding: 0;
-  float: left;
+  display: none;
 }
 
-#navmenu a:hover {
-  text-decoration: none;
+.submenu-content li:first-child a {
+  border-radius: 12px 12px 0 0;
 }
 
-.menu ul {
-  display: none;
+.submenu-content li:last-child a {
+  border-radius: 0px 0px 12px 12px;
 }
 
-.menu ul.dropit-submenu {
-  background-color: #fcfcfa;
-  border: 1px solid #b2b2b2;
-  margin: 0 0 0 1px;
-  box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+.submenu.open .submenu-content {
+  display: initial;
 }
 
-.menu ul.dropit-submenu a {
+#navmenu {
+  padding: 0;
+  margin: 0;
+  right: 0px;
+  z-index: 1000;
+  margin-right: 15px;
+}
+
+.submenu-content li a {
   display: block;
   color: #777;
-  padding: 0 8px 2px 8px;
+  padding: 2px 20px 2px 20px;
 }
 
-.menu ul.dropit-submenu a:hover {
+#navbar .submenu-content a:hover {
   background: #259dff;
-  color: #fff !important;
+  color: #fff;
   text-decoration: none;
 }
 
@@ -852,13 +862,22 @@ h2 a {
 
 .algolia-autocomplete {
   max-width: 9em;
-  top: -0.2em;
-  margin-right: 3px;
 }
 
 .algolia-autocomplete #q {
-  display: initial
+  display: initial;
+  border-radius: 8px;
+  border: 1px solid #ddd;
+  transition: color .3s ease;
+  padding-inline: 12px;
+  outline: none;
 }
+
+.algolia-autocomplete #q:focus-visible,
+.algolia-autocomplete #q:focus {
+  border-color: #333;
+}
+
 /* search-bar desktop re-sizing */
 @media all and (min-width: 950px) {
   .algolia-autocomplete {
@@ -869,7 +888,7 @@ h2 a {
 
 /* responsive */
 
-@media all and (max-width: 899px) {
+@media all and (max-width: 1110px) {
   #home-content {
     flex-direction: column;
   }
@@ -905,10 +924,6 @@ h2 a {
     word-break: break-all;
   }
 
-  .menu ul.dropit-submenu a {
-    font-size: 16px !important;
-  }
-
   ul {
     padding-left: 5%;
   }
@@ -984,10 +999,6 @@ h2 a {
     font-weight: bold;
   }
 
-  #mobile-menu {
-    display: block;
-  }
-
   #boxes div {
     width: 90%;
   }
@@ -998,111 +1009,14 @@ h2 a {
     top: 7px;
   }
 
-  #navbar {
-    padding: 0;
-    top: 1px;
-  }
-
-  #navbar a {
-    font-size: 19px;
-    margin: 0;
-    padding-left: 5%;
-  }
-
-  #navmenu {
-    left: 0;
-    padding: 0;
-    top: 2px;
-    background: #fff;
-    width: 100%;
-    display: none;
-  }
-
-  #navmenu.opens {
-    display: block;
-  }
-
   #overlay.blurs{
     display: block;
   }
 
-  #navmenu > li {
-    float: none;
-    border-bottom: 1px solid #ccc;
-    margin: 0;
-    min-height: 47px;
-    position: relative;
-    background: #eee;
-    cursor: pointer;
-  }
-
-  #navmenu > li:first-child {
-    display: none;
-  }
-
-  #navmenu > li:hover {
-    background: #e9e9e9;
-  }
-
-  #navmenu > li > ul {
-    position: static;
-  }
-
-  .dropit .dropit-submenu {
-    position: static !important;
-  }
-
-  .dropit .dropit-trigger {
-    padding-top: 7px;
-  }
-
-  .menu ul.dropit-submenu {
-    margin-top: 7px;
-    background: #ddd;
-    padding: 0;
-    margin: 0;
-    border: none;
-    border-radius: 0;
-    box-shadow: none;
-    max-height: 190px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-
-  .dropit-trigger > a {
-    display: block;
-    margin-bottom: 8px !important;
-  }
-
-  .menu ul.dropit-submenu a {
-    padding: 5px 5px 5px 5%;
-  }
-
-  .dropit-submenu li {
-    border-bottom: 1px solid #cdcdcd;
-  }
-
-  .dropit-submenu a {
-    padding-left: 10% !important;
-  }
-
   .menu ul {
     display: block;
   }
 
-  .active-mobile-menu {
-    border-bottom: none !important;
-  }
-
-  .active-mobile-menu .dropit-trigger {
-    margin-bottom: 0 !important;
-  }
-
-  .menu ul.dropit-submenu a:hover {
-    background: #cccccc;
-    color: #666 !important;
-  }
-
   #footer-content {
     flex-wrap: wrap;
     justify-content: center;
@@ -1117,11 +1031,6 @@ h2 a {
   #doc-langs {
     font-size: 11px;
   }
-
-  .algolia-autocomplete {
-    display: none !important;
-  }
-
 }
 
 
@@ -1359,4 +1268,133 @@ blockquote {
   font-style: italic;
   padding-left: 1.2em;
   border-left: .25rem solid #ccc;
+}
+
+@media all and (max-width: 1110px) {
+  header {
+    column-gap: 12px;
+    padding-inline: 32px;
+  }
+
+  #mobile-menu {
+    display: block;
+  }
+
+  .algolia-autocomplete {
+    display: none !important;
+  }
+
+  #navbar {
+    padding: 0;
+    top: 1px;
+    position: static;
+  }
+
+  #navmenu>li:first-child {
+    display: none;
+  }
+
+  #navmenu>li {
+    border-bottom: 1px solid #ccc;
+    margin: 0;
+    min-height: 47px;
+    background: #eee;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  #navmenu>li:hover {
+    background: #e9e9e9;
+  }
+
+  #navmenu {
+    left: 0;
+    padding: 0;
+    top: 57px;
+    background: #fff;
+    width: 100%;
+    position: absolute;
+    display: none;
+  }
+
+  #navmenu.opens {
+    display: block;
+  }
+
+  #navbar a {
+    font-size: 19px;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    padding-left: 5%;
+  }
+
+  #navbar .submenu.open {
+    flex-direction: column;
+    align-items: initial;
+  }
+
+  .submenu.open > a {
+    display: flex;
+    align-items: center;
+    min-height: 47px;
+  }
+
+  .submenu-content {
+    width: 100%;
+    position: static;
+    display: none;
+    margin-top: 7px;
+    background: #ddd;
+    color: #333;
+    padding: 0;
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    max-height: 190px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transform: none;
+  }
+
+  .submenu-content li > a {
+    width: 100%;
+  }
+
+  .submenu-content li:first-child a {
+    border-radius: 0;
+  }
+
+  .submenu-content li:last-child {
+    border-bottom: 0;
+  }
+
+  .submenu-content li:last-child a {
+    border-radius: 0;
+  }
+
+  .submenu-content.open {
+    display: inline-block;
+  }
+
+  #navbar .submenu-content li a {
+    font-size: 16px;
+    padding: 5px 5px 5px 5%;
+    padding-left: 10%;
+  }
+
+  .submenu-content li {
+    border-bottom: 1px solid #cdcdcd;
+  }
+
+  .submenu-content li a:hover {
+    background: #cccccc;
+    color: #666;
+  }
+
+  #theme-icon-container{
+    z-index: 10000;
+  }
 }
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
index a648bbf455..17b086e694 100644
--- a/js/app.js
+++ b/js/app.js
@@ -4,23 +4,9 @@
 */
 
 $(function(){
-
-  var isSmallScreen = checkSmallScreen()
-
-  $(window).resize(function () {
-    isSmallScreen = checkSmallScreen()
-  })
-
-  function checkSmallScreen() {
-    return window.innerWidth < 899 ? true : false
-  }
-
   var doc = $(document);
   var lang = document.location.pathname.split('/')[1]
 
-  // hilight the menu item of the current page
-  $('#navmenu ul ul').find('a[href="'+ document.location.pathname + '"]').addClass('current')
-
   // top link
   $('#top').click(function(e){
     $('html, body').animate({scrollTop : 0}, 500);
@@ -158,84 +144,6 @@ $(function(){
       $(this).next().addClass('active')
     })
 
-  // show mobile menu
-  $('#nav-button').click(function () {
-    $('#navmenu').toggleClass('opens');
-    $('#overlay').toggleClass('blurs');
-  });
-
-  // close mobile menu
-  $('#overlay').click(function () {
-    $('#navmenu').removeClass('opens');
-    $('#overlay').removeClass('blurs');
-  });
-
-  // dropdown menu
-
-  if ('ontouchstart' in document.documentElement) {
-    $('#application-menu').dropit({ action: 'click' })
-    $('#getting-started-menu').dropit({ action: 'click' })
-    $('#guide-menu').dropit({ action: 'click' })
-    $('#advanced-topics-menu').dropit({ action: 'click' })
-    $('#resources-menu').dropit({ action: 'click' })
-    $('#blog-menu').dropit({ action: 'click' })
-    $('#lb-menu').dropit({ action: 'click' })
-    $('#changelog-menu').dropit({ action: 'click' })
-  }
-  else {
-    $('#application-menu').dropit({ action: 'mouseenter' })
-    $('#getting-started-menu').dropit({ action: 'mouseenter' })
-    $('#guide-menu').dropit({ action: 'mouseenter' })
-    $('#advanced-topics-menu').dropit({ action: 'mouseenter' })
-    $('#resources-menu').dropit({ action: 'mouseenter' })
-    $('#blog-menu').dropit({ action: 'mouseenter' })
-    $('#lb-menu').dropit({ action: 'mouseenter' })
-    $('#changelog-menu').dropit({ action: 'mouseenter' })
-  }
-
-  // mobile
-
-  // main menu
-  $('#navmenu > li').click(function () {
-
-    // applicable only if it has a menu
-    if ($(this).find('ul').length) {
-
-      if ($(this).hasClass('active-mobile-menu')) {
-        $(this).removeClass('active-mobile-menu')
-        $(this).find('.dropit .dropit-submenu').hide()
-      }
-      else {
-        $('.dropit .dropit-submenu').hide()
-        $(this).find('.dropit .dropit-submenu').show()
-        $('#navmenu li.active-mobile-menu').removeClass('active-mobile-menu')
-        $(this).addClass('active-mobile-menu')
-      }
-    }
-    else if (isMobile.any || isSmallScreen) {
-      var path = $(this).find('a').attr('href')
-      document.location = path
-    }
-
-  })
-
-  // when in mobile mode, menu names should open the submenu
-  $('.dropit-trigger a').click(function (e) {
-
-    if (window.matchMedia('(max-width: 899px)').matches) {
-      e.preventDefault()
-    }
-
-  })
-
-  // sub menu navigation
-  $('.dropit-submenu li').click(function () {
-    if (isMobile.any || isSmallScreen) {
-      var path = $(this).find('a').attr('href')
-      document.location = path
-    }
-  })
-
   // i18n notice
   if (readCookie('i18nClose')) {
     $('#i18n-notice-box').hide()
diff --git a/js/dropit.js b/js/dropit.js
deleted file mode 100644
index a13abe3cb1..0000000000
--- a/js/dropit.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/*
- * Dropit v1.1.0
- * http://dev7studios.com/dropit
- *
- * Copyright 2012, Dev7studios
- * Free to use and abuse under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- */
-
-;(function($) {
-
-    $.fn.dropit = function(method, minWidth) {
-
-        minWidth = minWidth || '770px';
-
-        var methods = {
-
-            init : function(options) {
-                this.dropit.settings = $.extend({}, this.dropit.defaults, options);
-                return this.each(function() {
-                    var $el = $(this),
-                         el = this,
-                         settings = $.fn.dropit.settings;
-
-                    // Hide initial submenus
-                    $el.addClass('dropit')
-                    .find('>'+ settings.triggerParentEl +':has('+ settings.submenuEl +')').addClass('dropit-trigger')
-                    .find(settings.submenuEl).addClass('dropit-submenu').hide();
-
-                    // Open on click
-                    $el.on(settings.action, settings.triggerParentEl +':has('+ settings.submenuEl +') > '+ settings.triggerEl +'', function(){
-
-                        if (!window.matchMedia('(min-width: '+ minWidth +')').matches) return;
-
-                        // Close click menu's if clicked again
-                        if(settings.action == 'click' && $(this).parents(settings.triggerParentEl).hasClass('dropit-open')){
-                            settings.beforeHide.call(this);
-                            $(this).parents(settings.triggerParentEl).removeClass('dropit-open');
-                            $(this).find(settings.submenuEl).hide();
-                            settings.afterHide.call(this);
-                            return false;
-                        }
-
-                        // Hide open menus
-                        settings.beforeHide.call(this);
-                        $('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
-                        settings.afterHide.call(this);
-
-                        // Open this menu
-                        settings.beforeShow.call(this);
-                        $(this).parents(settings.triggerParentEl).addClass('dropit-open').find(settings.submenuEl).show();
-                        settings.afterShow.call(this);
-
-                        return false;
-                    });
-
-                    // Close if outside click
-                    $(document).on('click', function(){
-
-                        if (!window.matchMedia('(min-width: '+ minWidth +')').matches) return;
-
-                        settings.beforeHide.call(this);
-                        $('.dropit-open').removeClass('dropit-open').find('.dropit-submenu').hide();
-                        settings.afterHide.call(this);
-                    });
-
-                    // If hover
-                    if(settings.action == 'mouseenter'){
-
-                        if (!window.matchMedia('(min-width: '+ minWidth +')').matches) return;
-
-                        $el.on('mouseleave', function(){
-                            settings.beforeHide.call(this);
-                            $(this).removeClass('dropit-open').find(settings.submenuEl).hide();
-                            settings.afterHide.call(this);
-                        });
-                    }
-
-                    settings.afterLoad.call(this);
-                });
-            }
-
-        };
-
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else if (typeof method === 'object' || !method) {
-            return methods.init.apply(this, arguments);
-        } else {
-            $.error( 'Method "' +  method + '" does not exist in dropit plugin!');
-        }
-
-    };
-
-    $.fn.dropit.defaults = {
-        action: 'click', // The open action for the trigger
-        submenuEl: 'ul', // The submenu element
-        triggerEl: 'a', // The trigger element
-        triggerParentEl: 'li', // The trigger parent element
-        afterLoad: function(){}, // Triggers when plugin has loaded
-        beforeShow: function(){}, // Triggers before submenu is shown
-        afterShow: function(){}, // Triggers after submenu is shown
-        beforeHide: function(){}, // Triggers before submenu is hidden
-        afterHide: function(){} // Triggers before submenu is hidden
-    };
-
-    $.fn.dropit.settings = {};
-
-})(jQuery);
diff --git a/js/ismobile.js b/js/ismobile.js
index 0de144d707..3591097497 100644
--- a/js/ismobile.js
+++ b/js/ismobile.js
@@ -1 +1 @@
-!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/Windows Phone/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");if("undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window)return this},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);
+!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/Windows Phone/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");if("undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window)return this},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);
\ No newline at end of file
diff --git a/js/menu.js b/js/menu.js
new file mode 100644
index 0000000000..f2bf0d633c
--- /dev/null
+++ b/js/menu.js
@@ -0,0 +1,76 @@
+// It uses `window.matchMedia` instead of `window.addEventListener('resize')` because `matchMedia` performs better by not changing its value with every screen resize.
+const mobileScreen = window.matchMedia("(max-width: 1110px)");
+let isSmallScreen = mobileScreen?.matches;
+
+mobileScreen?.addEventListener("change", (event) => {
+	isSmallScreen = event.matches
+
+	if (!event.matches) {
+		document.body.classList.remove("no-scroll")
+	}
+});
+
+// Desktop Menu
+
+const itemsMenu = document.querySelectorAll(".submenu");
+
+for (const el of itemsMenu) {
+	el.addEventListener("click", () => {
+		if (isSmallScreen || 'ontouchstart' in document.documentElement) {
+			for (const item of itemsMenu) {
+				if (item.id !== el.id) {
+					item.classList.remove("open");
+				}
+			}
+			el.classList.toggle("open");
+		}
+	});
+
+	el.addEventListener("mouseenter", () => {
+		if (!isSmallScreen) {
+			el.classList.add("open");
+		}
+	});
+	
+	el.addEventListener("mouseleave", () => {
+		if (!isSmallScreen) {
+			el.classList.remove("open");
+		}
+	});
+}
+
+// Mobile Menu
+
+const linkItemsMenu = document.querySelectorAll(".submenu > a");
+const menu = document.querySelector("#navmenu");
+const overlay = document.querySelector("#overlay");
+
+for (const el of linkItemsMenu) {
+	el.addEventListener("click", (e) => {
+		if (el.classList.contains("open")) {
+			el.classList.remove("open");
+		}  
+		
+		if (isSmallScreen || 'ontouchstart' in document.documentElement) {
+			e.preventDefault();
+		}
+	});
+}
+
+document.querySelector("#nav-button")?.addEventListener("click", () => {
+	menu?.classList.toggle("opens");
+	overlay?.classList.toggle("blurs");
+	document.body.classList.toggle("no-scroll")
+});
+
+// close mobile menu
+overlay?.addEventListener("click", () => {
+	menu?.classList.remove("opens");
+	overlay?.classList.remove("blurs");
+	document.body.classList.remove("no-scroll")
+});
+
+// hilight the menu item of the current page
+document
+	.querySelector(`.submenu-content a[href="{document.location.pathname}"]`)
+	?.classList.add("current");