diff --git a/assets/js/navbar.js b/assets/js/navbar.js
index 70e76787..b859fda0 100644
--- a/assets/js/navbar.js
+++ b/assets/js/navbar.js
@@ -1,5 +1,6 @@
 const navbar = document.querySelector('.navbar')
 const toggler = document.getElementById('main-nav-toggler')
+const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 
 // set the navbar background color to opaque when scrolling past a breakpoint
 window.onscroll = () => {
@@ -14,3 +15,10 @@ window.onscroll = () => {
 toggler.onclick = () => {
   navbar.classList.toggle('navbar-expanded')
 }
+
+// invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
+for (let i = 0; i < modeSelectors.length; ++i) {
+  modeSelectors[i].onclick = () => {
+    toggler.click()
+  }
+}
diff --git a/layouts/partials/assets/navbar.html b/layouts/partials/assets/navbar.html
index 4fa8a8db..da64a6a7 100644
--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -26,19 +26,19 @@
         </a>
         <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
             <li>
-                <a class="dropdown-item" data-bs-theme-value="light" href="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
                     {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
                     {{ T "colorLight" }}
                 </a>
             </li>
             <li>
-                <a class="dropdown-item" data-bs-theme-value="dark" href="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
                     {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
                     {{ T "colorDark" }}
                 </a>
             </li>
             <li>
-                <a class="dropdown-item" data-bs-theme-value="auto" href="#!" {{ if $collapsed }}data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"{{ end }}>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
                     {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
                     {{ T "colorAuto" }}
                 </a>