From ab29a7adf6a64173c7aeee6e308d6e8c36842c82 Mon Sep 17 00:00:00 2001
From: Ross <ross@xkjq.uk>
Date: Tue, 28 Oct 2025 21:11:25 +0000
Subject: [PATCH] Enhance navbar usability with improved tap targets and mobile
 dropdown behavior

---
 sbas/templates/sbas/base.html |  4 ++++
 templates/base.html           | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/sbas/templates/sbas/base.html b/sbas/templates/sbas/base.html
index ee438fbb..6f60da16 100644
--- a/sbas/templates/sbas/base.html
+++ b/sbas/templates/sbas/base.html
@@ -4,6 +4,10 @@
     Sbas
 {% endblock %}
 
+{% block css %}
+
+{% endblock %}
+
 {% block navigation %}
     <nav class="navbar navbar-expand-lg navbar-dark submenu">
         <div class="container-fluid">
diff --git a/templates/base.html b/templates/base.html
index 89243788..bdcb03c8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -110,6 +110,40 @@
 
                 }
             }
+            
+/* Improve navbar tap targets and mobile dropdown behaviour */
+@media (max-width: 991.98px) {
+    /* Make navbar links larger and easier to tap */
+    .navbar-nav .nav-link {
+        padding: .75rem 1rem;
+        font-size: 1.05rem;
+        min-height: 44px; /* recommended minimum touch target */
+    }
+
+    /* Make dropdown items full-width and larger */
+    .navbar-nav .dropdown-menu .dropdown-item {
+        padding: .75rem 1rem;
+        font-size: 1.05rem;
+    }
+
+    /* When the navbar is collapsed, render dropdown menus as static stacked blocks
+         so nested items are easy to tap (prevents absolute-position overlap issues). */
+    .navbar-collapse .dropdown-menu {
+        position: static !important;
+        float: none !important;
+        display: block !important;
+        width: 100% !important;
+        margin-top: .25rem;
+    }
+
+    /* Ensure dropdown toggles are full-width when collapsed */
+    .navbar-collapse .dropdown > .nav-link {
+        width: 100%;
+        text-align: left;
+        display: block;
+    }
+}
+
         </style>
         {% block css %}
         {% endblock %}