3.3.2

Header menu and footer tidy

assets/about.css

@@ -56,6 +56,15 @@ header a.active { color: #c8922a; }
   display: inline-flex;
   align-items: center;
 }
+/* Invisible bridge so hover doesn't break between toggle and menu */
+.nav-dropdown::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  height: 4px;
+}
 .nav-dropdown-toggle .caret {
   display: inline-block;
   margin-left: 4px;
@@ -68,9 +77,9 @@ header a.active { color: #c8922a; }
 }
 .nav-dropdown-menu {
   position: absolute;
-  top: 100%;
-  right: 0;
-  margin-top: 10px;
+  top: calc(100% - 1px);
+  left: 50%;
+  margin-top: 0;
   background: #f5edd6;
   border: 1px solid #e0d0a8;
   border-radius: 8px;
@@ -81,7 +90,7 @@ header a.active { color: #c8922a; }
   padding: 6px;
   opacity: 0;
   visibility: hidden;
-  transform: translateY(-4px);
+  transform: translateX(-50%) translateY(-4px);
   transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
   z-index: 110;
 }
@@ -89,7 +98,7 @@ header a.active { color: #c8922a; }
 .nav-dropdown:focus-within .nav-dropdown-menu {
   opacity: 1;
   visibility: visible;
-  transform: translateY(0);
+  transform: translateX(-50%) translateY(0);
 }
 .nav-dropdown-menu a {
   text-transform: none;