diff --git a/common/app/Nav/MediumNav.jsx b/common/app/Nav/MediumNav.jsx
index 498b7b367e..153cae84e1 100644
--- a/common/app/Nav/MediumNav.jsx
+++ b/common/app/Nav/MediumNav.jsx
@@ -10,8 +10,9 @@ function MediumNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
   return (
     <Media
       query={{ maxWidth: 955, minWidth: 751 }}
-      render={
-        () => (
+      >
+      {
+        matches => matches && typeof window !== 'undefined' && (
           <div>
           <Row>
               <Navbar.Header className='medium-nav'>
@@ -42,7 +43,7 @@ function MediumNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
           </div>
         )
       }
-    />
+    </Media>
   );
 }
 
diff --git a/common/app/Nav/SmallNav.jsx b/common/app/Nav/SmallNav.jsx
index 16713ea238..e6bd7d751f 100644
--- a/common/app/Nav/SmallNav.jsx
+++ b/common/app/Nav/SmallNav.jsx
@@ -10,8 +10,9 @@ function SmallNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
   return (
     <Media
       query='(max-width: 750px)'
-      render={
-        () => (
+      >
+      {
+        matches => matches && typeof window !== 'undefined' && (
           <div>
           <Row>
               <Navbar.Header className='small-nav'>
@@ -43,7 +44,7 @@ function SmallNav({ clickOnLogo, clickOnMap, shouldShowMapButton, panes }) {
           </div>
         )
       }
-    />
+    </Media>
   );
 }