diff --git a/containers/backupchecks/src/templates/layout/base.html b/containers/backupchecks/src/templates/layout/base.html
index 346069b..4a06250 100644
--- a/containers/backupchecks/src/templates/layout/base.html
+++ b/containers/backupchecks/src/templates/layout/base.html
@@ -197,7 +197,7 @@
       </div>
     </nav>
 
-    <main class="{% block main_class %}container content-container{% endblock %}" style="padding-top: 80px;">
+    <main class="{% block main_class %}container content-container{% endblock %}" id="main-content">
       {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
           <div class="mb-3">
@@ -216,6 +216,58 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 
+    <script>
+      // Dynamic navbar height adjustment
+      (function () {
+        function adjustContentPadding() {
+          try {
+            var navbar = document.querySelector('.navbar.fixed-top');
+            var mainContent = document.getElementById('main-content');
+            if (!navbar || !mainContent) return;
+
+            // Get actual navbar height
+            var navbarHeight = navbar.offsetHeight;
+
+            // Add small buffer (20px) for visual spacing
+            var paddingTop = navbarHeight + 20;
+
+            // Apply padding to main content
+            mainContent.style.paddingTop = paddingTop + 'px';
+          } catch (e) {
+            // Fallback to 80px if something goes wrong
+            var mainContent = document.getElementById('main-content');
+            if (mainContent) {
+              mainContent.style.paddingTop = '80px';
+            }
+          }
+        }
+
+        // Run on page load
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', adjustContentPadding);
+        } else {
+          adjustContentPadding();
+        }
+
+        // Run after navbar is fully rendered
+        window.addEventListener('load', adjustContentPadding);
+
+        // Run on window resize
+        var resizeTimeout;
+        window.addEventListener('resize', function () {
+          clearTimeout(resizeTimeout);
+          resizeTimeout = setTimeout(adjustContentPadding, 100);
+        });
+
+        // Run when navbar collapse is toggled
+        var navbarCollapse = document.getElementById('navbarNav');
+        if (navbarCollapse) {
+          navbarCollapse.addEventListener('shown.bs.collapse', adjustContentPadding);
+          navbarCollapse.addEventListener('hidden.bs.collapse', adjustContentPadding);
+        }
+      })();
+    </script>
+
     <script>
       (function () {
         function isOverflowing(el) {
diff --git a/docs/changelog-claude.md b/docs/changelog-claude.md
index 5e24347..2bc0cab 100644
--- a/docs/changelog-claude.md
+++ b/docs/changelog-claude.md
@@ -14,6 +14,7 @@ This file documents all changes made to this project via Claude Code.
 
 ### Fixed
 - Fixed Autotask ticket description being set to NULL when resolving tickets via `update_ticket_resolution_safe` by adding "description" to the optional_fields list, ensuring the original description is preserved during PUT operations
+- Fixed responsive navbar overlapping page content on smaller screens by implementing dynamic padding adjustment (JavaScript measures actual navbar height and adjusts main content padding-top automatically on page load, window resize, and navbar collapse toggle events)
 
 ### Changed
 - Updated `docs/changelog.md` with comprehensive v0.1.23 release notes consolidating all changes from 2026-02-06 through 2026-02-08 (Documentation System, Audit Logging, Timezone-Aware Display, Autotask Improvements, Environment Identification, Bug Fixes)