diff --git a/components/Nav.html b/components/Nav.html
index a6b72ad..23c0631 100644
--- a/components/Nav.html
+++ b/components/Nav.html
@@ -1,11 +1,11 @@
 <nav>
 	<ul>
-		<li><a class='{path === "/"  ? "selected" : ""}' href='.'>home</a></li>
-		<li><a class='{path === "/about"  ? "selected" : ""}' href='about'>about</a></li>
+		<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li>
+		<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li>
 
 		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class='{path.startsWith("/blog")  ? "selected" : ""}' href='blog'>blog</a></li>
+		<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li>
 	</ul>
 </nav>
 
diff --git a/routes/index.html b/routes/index.html
index 4de5170..efa6c15 100644
--- a/routes/index.html
+++ b/routes/index.html
@@ -1,4 +1,4 @@
-<Nav {path}/>
+<Nav segment={child.segment}/>
 
 <main>
 	<svelte:component this={child.component} {...child.props}/>