diff --git a/assets/css/common/header.css b/assets/css/common/header.css
index c9edb8fe..14e36e35 100644
--- a/assets/css/common/header.css
+++ b/assets/css/common/header.css
@@ -64,6 +64,10 @@
     display: inline-flex;
 }
 
+.nav-sep {
+    color: var(--secondary);
+}
+
 .lang-menu * {
     display: inherit;
     min-height: inherit;
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html
index 64c3193c..bc101701 100644
--- a/layouts/_partials/header.html
+++ b/layouts/_partials/header.html
@@ -62,7 +62,7 @@
                     {{- $lang := .Lang}}
                     {{- with site.Home.Translations }}
                     {{- $separator := or $label_text (not site.Params.disableThemeToggle)}}
-                    {{- if $separator }}<span>|</span>{{ end }}
+                    {{- if $separator }}<span class="nav-sep">|</span>{{ end }}
                     <ul class="lang-menu">
                         {{- range . -}}
                         {{- if ne $lang .Lang }}