diff --git a/src/navigation/NavBar.css b/src/navigation/NavBar.css
index 728333cc9..16a8ac974 100644
--- a/src/navigation/NavBar.css
+++ b/src/navigation/NavBar.css
@@ -1,5 +1,5 @@
 .navbar-item-active {
-  border-bottom: 5px solid rgba(201, 210, 215, .4);
+  border-bottom: 5px solid rgba(201, 210, 215, 0.4);
 }
 
 .navbar-item-label {
@@ -26,7 +26,7 @@
     width: 9.25rem;
   }
   .navbar-item-active {
-    border-left: 5px solid rgba(201, 210, 215, .4);
+    border-left: 5px solid rgba(201, 210, 215, 0.4);
     border-bottom: 0;
   }
 }
@@ -50,3 +50,11 @@
     display: none;
   }
 }
+
+.navbar-item:focus {
+  outline: none;
+}
+
+.navbar-item:focus:not(:focus-visible) {
+  background-color: transparent;
+}
diff --git a/src/navigation/NavBar.js b/src/navigation/NavBar.js
index 6123f180f..6a4556af2 100644
--- a/src/navigation/NavBar.js
+++ b/src/navigation/NavBar.js
@@ -34,7 +34,7 @@ const NavLink = ({
   const href = `#${to}`
   const active = alternative
     ? hash === href || hash.startsWith(`${href}${alternative}`)
-    : hash && hash.startsWith(href)
+    : hash === href || hash.startsWith(`${href}/`)
   const anchorClass = classnames({
     'bg-white-10 navbar-item-active': active,
     'o-50 no-pointer-events': disabled
@@ -46,7 +46,7 @@ const NavLink = ({
 
   return (
     // eslint-disable-next-line jsx-a11y/anchor-is-valid
-    <a href={disabled ? undefined : href} className={anchorClass} role='menuitem' title={children}>
+    <a href={disabled ? undefined : href} onClick={(e) => e.currentTarget.blur()} className={anchorClass} role='menuitem' title={children}>
       <div className='db ph2 pv1'>
         <div className='db'>
           <Svg width='46' role='presentation' className={svgClass} />