_includes/header.html

@@ -29,4 +29,24 @@
       </div>
     </div>
   </div>
+	<script>
+		document.addEventListener('DOMContentLoaded', function () {
+			let pathSegment = window.location.pathname.split('/')[1];
+
+			if (pathSegment.endsWith('.html')) {
+				pathSegment = pathSegment.replace('.html', '');
+			}
+
+			const navLinks = document.querySelectorAll('.header-page-links li a');
+
+			navLinks.forEach(link => {
+				let linkPath = link.getAttribute('href').replace('/', '').replace('.html', '');
+
+				if (linkPath === pathSegment) {
+					link.classList.add('active');
+				}
+			});
+		});
+
+	</script>
 </header>

_sass/base.scss

@@ -1475,6 +1475,10 @@ pre {
 	color: var(--light-grey);
 }
 
+.active {
+	color: white !important;
+}
+
 /** end carousel */
 
 /**