diff --git a/containers/backupchecks/src/static/css/layout.css b/containers/backupchecks/src/static/css/layout.css
index 52a2a69..f1cab6f 100644
--- a/containers/backupchecks/src/static/css/layout.css
+++ b/containers/backupchecks/src/static/css/layout.css
@@ -89,6 +89,27 @@ main.dashboard-container {
 }
 
 /* Navbar responsive behavior for split-screen/half-width desktop layouts */
+@media (max-width: 2200px) {
+  /* Force collapsed navbar mode for split-screen desktop usage */
+  .navbar.navbar-force-collapse .navbar-toggler {
+    display: block !important;
+  }
+
+  .navbar.navbar-force-collapse .navbar-collapse {
+    display: none !important;
+    width: 100%;
+    flex-basis: 100%;
+  }
+
+  .navbar.navbar-force-collapse .navbar-collapse.show {
+    display: block !important;
+  }
+
+  .navbar.navbar-force-collapse .navbar-nav {
+    flex-direction: column !important;
+  }
+}
+
 @media (max-width: 1399.98px) {
   .navbar .navbar-collapse {
     align-items: stretch;
diff --git a/containers/backupchecks/src/templates/layout/base.html b/containers/backupchecks/src/templates/layout/base.html
index 714408a..168ed46 100644
--- a/containers/backupchecks/src/templates/layout/base.html
+++ b/containers/backupchecks/src/templates/layout/base.html
@@ -59,7 +59,7 @@
     </div>
     {% endif %}
 
-    <nav class="navbar navbar-expand-xxl fixed-top bg-body-tertiary border-bottom">
+    <nav class="navbar navbar-expand-xxl navbar-force-collapse fixed-top bg-body-tertiary border-bottom">
       <div class="container-fluid">
         <a class="navbar-brand" href="{{ url_for('main.dashboard') }}">Backupchecks</a>
         <button