Add .nav-link to links in the header

This will apply Bootstrap's .nav-link:focus-visible style which coordinates with the background
sul-dlss · Aug 26, 2024 · a4d2e4e · a4d2e4e
1 parent 463b3a0
commit a4d2e4e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/header/index.html b/header/index.html
@@ -61,7 +61,7 @@ <h2>With navigation links</h2>
       >
         <div class="container">
           <a
-            class="mb-0 navbar-brand navbar-logo"
+            class="mb-0 navbar-brand navbar-logo nav-link"
             href="https://library.stanford.edu"
             >Stanford Libraries</a
           >
@@ -221,7 +221,9 @@ <h2>With navigation links</h2>
             <div
               class="col-md-8 d-flex justify-content-center justify-content-md-start"
             >
-              <div class="h1 my-4"><a href="/">Website at Stanford</a></div>
+              <div class="h1 my-4">
+                <a class="nav-link" href="/">Website at Stanford</a>
+              </div>
             </div>
             <div class="col-md-4 d-none d-md-block">
               <nav

diff --git a/styles/header.css b/styles/header.css
@@ -43,6 +43,8 @@
 }
 
 .masthead {
+  --bs-nav-link-color: white;
+
   .navbar-nav {
     --bs-nav-link-font-weight: 700;