Add active nav highlight on scroll and section change

Author: shahidghafoor00

script.js

@@ -24,6 +24,30 @@ document.querySelectorAll('.nav-links a').forEach(link => {
   link.addEventListener('click', () => navLinks.classList.remove('open'));
 });
 
+// ── ACTIVE NAV HIGHLIGHT ──
+const sections = document.querySelectorAll('section[id]');
+const navAnchors = document.querySelectorAll('.nav-links a[href^="#"]');
+
+function setActiveNav() {
+  let current = '';
+  sections.forEach(section => {
+    const sectionTop = section.offsetTop - 100;
+    if (window.scrollY >= sectionTop) {
+      current = section.getAttribute('id');
+    }
+  });
+
+  navAnchors.forEach(a => {
+    a.classList.remove('active');
+    if (a.getAttribute('href') === `#${current}`) {
+      a.classList.add('active');
+    }
+  });
+}
+
+window.addEventListener('scroll', setActiveNav);
+setActiveNav();
+
 // Scroll animations
 const observer = new IntersectionObserver((entries) => {
   entries.forEach(entry => {

styles.css

@@ -51,6 +51,12 @@ nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
   transition: color var(--transition);
 }
 .nav-links a:hover { color: var(--black); }
+.nav-links a.active {
+  color: var(--black);
+  font-weight: 700;
+  border-bottom: 2px solid var(--black);
+  padding-bottom: 2px;
+}
 
 .nav-cta {
   background: var(--black);
@@ -673,6 +679,7 @@ body.dark nav {
 }
 body.dark .nav-links a { color: #888; }
 body.dark .nav-links a:hover { color: #fff; }
+body.dark .nav-links a.active { color: #fff; border-bottom-color: #fff; }
 body.dark .nav-cta { background: #fff; color: #000 !important; }
 body.dark .nav-cta:hover { background: #e8e8e8; }
 body.dark .hamburger span { background: #fff; }