#18 fix transparent navigation bug

CHANGELOG.md

@@ -2,6 +2,7 @@
 ##  _unreleased_
 1. [](#bugfix)
    - Fix reading time template missing
+   - Fix transparent navigation bug (#18)
 1. [](#improved)
    - add translations for admin > pages > modals (navigation)
 

scss/_navigation.scss

@@ -28,6 +28,31 @@ body.header-dark .mobile-menu #toggle span,
 	background: $text-color-secondary;
 }
 
+// navigation menu
+body:is(.header-light, .header-transparent) #header, #header.scrolled {
+	background-color: $background-color;
+	color: $text-color;
+
+	.dropmenu ul > li > a:is(.active, :focus, :hover) {
+		color: $primary-color !important;
+	}
+}
+
+// navigation in dark mode (& transparent dark mode)
+body:is(.header-dark) #header:not(.scrolled) {
+	color: $text-color-secondary-dark;
+
+	// default dropdown
+	.dropmenu ul > li > a:is(.active, :focus, :hover) {
+		color: $primary-color !important;
+	}
+
+	// navigation items
+	.dropmenu > ul > li > a:is(.active, :focus, :hover) {
+		color: $text-color-secondary !important;
+	}
+}
+
 // mobile nav
 .mobile-container {
 	.mobile-logo {

scss/_theme.scss

@@ -23,3 +23,23 @@ $overlay-dark-grad-to: #00000000;
 $responsive-breakpoint-mobile: 640px;
 $responsive-breakpoint-tablet: 840px;
 $responsive-breakpoint-desktop: 1280px;
+
+// elements
+$background-color: white;
+$text-color: $grey;
+$text-color-light: mix($text-color, $light-overlay, 25%);
+$text-color-secondary: white;
+$text-color-secondary-dark: mix($text-color-secondary, $dark-overlay);
+$link-color: $primary-color;
+$link-color__active: $accent-color;
+
+// header & footer
+$header-background: $background-color;
+$header-text: $text-color;
+$header-text__active: $text-color-secondary;
+$footer-background: $background-color;
+$footer-text: $text-color;
+$footer-text-link: $link-color;
+
+// sizes
+$nav-item-height: 4rem;