diff --git a/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss b/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss
index 2ad8727c176a9..f570d71ef7a64 100644
--- a/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss
+++ b/media_source/templates/site/cassiopeia/scss/blocks/_footer.scss
@@ -23,13 +23,25 @@
 
   .mod-menu {
     position: relative;
+
+    // Submenu toggles otherwise use the link colour, which has low contrast on
+    // the dark footer. Their focus outline uses currentColor, so it follows.
+    button {
+      color: currentColor;
+    }
   }
 
   @if $metismenu==true {
     .metismenu.mod-menu {
       .mm-collapse {
+        color: $white;
         background: var(--cassiopeia-color-primary);
       }
+
+      .metismenu-item > a:focus,
+      .metismenu-item > button:focus {
+        outline-color: $white;
+      }
     }
   }
 
diff --git a/media_source/templates/site/cassiopeia/scss/blocks/_header.scss b/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
index 46c4b0e731867..f508a59122275 100644
--- a/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
+++ b/media_source/templates/site/cassiopeia/scss/blocks/_header.scss
@@ -150,6 +150,7 @@
         right: 2px;
         left: 0;
         background: $white;
+        opacity: 1;
       }
 
       @include media-breakpoint-down(lg) {
@@ -203,6 +204,7 @@
         right: 0;
         left: 0;
         background: $white;
+        opacity: 1;
       }
 
       > button.mm-toggler-link:hover::before,
diff --git a/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss b/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss
index 2be2b6867444e..1d8b5453a50da 100644
--- a/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss
+++ b/media_source/templates/site/cassiopeia/scss/vendor/metismenu/_metismenu.scss
@@ -59,7 +59,7 @@
 
         > a:focus,
         > button:focus {
-          outline: 1px dotted $gray-400;
+          outline: 2px solid $gray-900;
           outline-offset: 2px;
         }
 
@@ -181,6 +181,15 @@
     }
   }
 
+  // Top-level items sit on the dark header background, which also holds the
+  // topbar and below-top positions. Submenus keep the dark outline.
+  .container-header .metismenu.mod-menu > .metismenu-item {
+    > a:focus,
+    > button:focus {
+      outline-color: $white;
+    }
+  }
+
   .sidebar-right,
   .sidebar-left {
     .metismenu {