diff --git a/site/_core/HeaderLinks.js b/site/_core/HeaderLinks.js
index 2b2e16c5fe..c1100411a8 100644
--- a/site/_core/HeaderLinks.js
+++ b/site/_core/HeaderLinks.js
@@ -18,7 +18,7 @@ const links = [
   { section: 'landscape', text: 'Landscape', href: 'https://l.graphql.org/' },
 ];
 
-export default ({ section }) =>
+export default ({ section, activeUrl }) => {
   <nav>
     {links.map(link =>
       <a
@@ -26,8 +26,10 @@ export default ({ section }) =>
         href={link.href}
         target={link.href.slice(0, 4) === 'http' ? '_blank' : null}
         rel={link.href.slice(0, 4) === 'http' ? 'noopener noreferrer' : null}
-        className={link.section === section ? 'active' : null}>
+        className={(link.section === section || activeUrl && activeUrl.startsWith(link.href)) ? 'active' : null}
+      >
         {link.text}
       </a>
     )}
   </nav>
+}
diff --git a/site/_core/Site.js b/site/_core/Site.js
index e26c13e988..0e35ae1a0c 100644
--- a/site/_core/Site.js
+++ b/site/_core/Site.js
@@ -49,7 +49,7 @@ export default ({ page, category, title, section, className, noSearch, children
             <img className="nav-logo" src="/img/logo.svg" alt="GraphQL Logo" width="30" height="30" />
             GraphQL
           </a>
-          <HeaderLinks section={section} />
+          <HeaderLinks section={section} activeUrl={page.permalink} />
           {noSearch || <Search />}
         </section>
       </header>