be more specific on css selector

_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

@@ -504,6 +504,10 @@ hr {
 	transition: transform 0.5s ease;
 }
 
+.header-page-links a.active {
+	color: white;
+}
+
 .header-page-links a:hover {
 	transform: translateY(-2px);
 	background-color: transparent;