Style header navigation menu toggle button

helenclx · Jan 4, 2025 · 53a1658 · 53a1658
1 parent 62722a2
commit 53a1658
Showing 1 changed file with 12 additions and 9 deletions.
diff --git a/src/_includes/global/header.njk b/src/_includes/global/header.njk
@@ -24,7 +24,7 @@
         <ul class="header__navmenu header__links">{{ navLinks | safe }}</ul>
         <button class="header__toggle" popovertarget="nav-menu" aria-label="Toggle navigation menu">
             <svg aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 128C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32L32 448c-17.7 0-32-14.3-32-32s14.3-32 32-32l384 0c17.7 0 32 14.3 32 32z"/></svg>
-            Navigation
+            Menu
         </button>
     </nav>
     <div popover id="nav-menu" class="header__popover">
@@ -68,21 +68,24 @@
     .header__title:focus > * { transform: scale(1.25); }
 
     .header__toggle {
+        --clr-toggle-txt: #fff;
+        --clr-toggle-bg: #8200cd;
         border: none;
-        background-color: transparent;
-        color: var(--clr-accent-700);
-        font-size: 2rem;
-        font-weight: 700;
-        padding: 0;
+        border-radius: 0.2em;
+        background-color: var(--clr-toggle-bg);
+        color: var(--clr-toggle-txt);
+        font-size: 1.7rem;
         display: none;
         align-items: center;
         gap: 0.15em;
+        padding-left: 0.25em;
+        padding-right: 0.26em;
     }
 
-    .header__toggle svg { fill: var(--clr-accent-700); }
+    .header__toggle svg { fill: var(--clr-toggle-txt); }
     .header__toggle:focus {
-        outline: 0.12em solid var(--clr-accent-600);
-        outline-offset: 0.15em;
+        outline: 0.15em solid var(--clr-toggle-bg);
+        outline-offset: 0.1em;
     }
 
     .header__navmenu {