diff --git a/assets/sass/components/_header.scss b/assets/sass/components/_header.scss
index a76a7c6b..5b3ce8fa 100644
--- a/assets/sass/components/_header.scss
+++ b/assets/sass/components/_header.scss
@@ -53,7 +53,7 @@ header {
     ul {
       list-style: none;
       display: flex;
-      align-items: center;
+      align-items: baseline;
       margin: 0;
       padding: 0;
 
@@ -90,6 +90,29 @@ header {
           }
         }
 
+        // Dark mode toggle
+        &#header-lightbulb {
+          align-self: center;
+
+          button {
+            // native button reset
+            border: 0;
+            padding: 0;
+
+            // prepare for lightbulb symbol depending on active theme (set in components/_global)
+            background-color: transparent;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+
+            height: 1.56em; // 24.33px, don't ask
+            width: 1.56em;
+            margin-top: -0.05em;
+            margin-left: 1.4em;
+            margin-right: -0.3em; // weirdness w/ svg ratio
+            cursor: pointer;
+          }
+        }
+
         // no margin on the first child to make more room on narrow windows (before responsiveness kicks in).
         // last child is the dark mode toggle -- margin is set directly on it in case it's hidden (if JS is disabled).
         &:first-child,
@@ -97,25 +120,6 @@ header {
           margin-left: 0;
         }
       }
-
-      // Dark mode toggle
-      button.dark-mode-toggle {
-        // native button reset
-        border: 0;
-        padding: 0;
-
-        // prepare for lightbulb symbol depending on active theme (set in components/_global)
-        background-color: transparent;
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-
-        height: 1.56em; // 24.33px, don't ask
-        width: 1.56em;
-        margin-top: -0.05em;
-        margin-left: 1.4em;
-        margin-right: -0.3em; // weirdness w/ svg ratio
-        cursor: pointer;
-      }
     }
   }
 }
@@ -143,7 +147,7 @@ header {
         }
       }
 
-      ul.header-menu {
+      ul {
         font-size: 1.6em;
 
         li {
@@ -164,16 +168,15 @@ header {
               transform: none;
             }
           }
-        }
 
-        // Dark mode toggle
-        button.dark-mode-toggle {
-          // TODO: figure out need for weird magic numbers here
-          height: 1.08em; // ~27px, don't ask
-          width: 1.08em;
-          margin-top: 0.15em;
-          margin-left: 1em;
-          margin-right: -0.2em; // weirdness w/ svg ratio
+          // Dark mode toggle
+          &#header-lightbulb button.dark-mode-toggle {
+            // TODO: figure out need for weird magic numbers here
+            height: 1.08em; // ~27px, don't ask
+            width: 1.08em;
+            margin-left: 1em;
+            margin-right: -0.2em; // weirdness w/ svg ratio
+          }
         }
       }
     }
diff --git a/layouts/partials/page/header.html b/layouts/partials/page/header.html
index 7b240aa4..f8e1a53b 100644
--- a/layouts/partials/page/header.html
+++ b/layouts/partials/page/header.html
@@ -16,7 +16,7 @@
         </a>
       </li>
       {{- end }}
-      <li>
+      <li id="header-lightbulb">
         <button class="dark-mode-toggle" title="Toggle Dark Mode" aria-label="Toggle Dark Mode" style="display: none;"></button>
       </li>
     </ul>