1 files changed, 16 insertions, 7 deletions
diff --git a/StoneIsland/platforms/ios/www/css/nav.css b/StoneIsland/platforms/ios/www/css/nav.css
index 8ae57921..bd6747b1 100755
--- a/StoneIsland/platforms/ios/www/css/nav.css
+++ b/StoneIsland/platforms/ios/www/css/nav.css
@@ -3,7 +3,9 @@
 
 #nav {
   position: fixed;
-  top: 0; left: 0;
+  top: env(safe-area-inset-top);
+  left: 0;
+  height: calc(100vh - env(safe-area-inset-top));
   width: 249px;
   -webkit-transform: translateZ(0) translateX(-249px);
   -webkit-transition: -webkit-transform 0.1s;
@@ -11,8 +13,10 @@
 }
 #content {
   position: fixed;
-  top: 0; left: 0;
-  width: 100%; height: 100%;
+  top: env(safe-area-inset-top);
+  left: 0;
+  width: 100%;
+  height: calc(100vh - env(safe-area-inset-top));
   overflow: hidden;
   -webkit-transform: translateZ(0) translateX(0px);
   -webkit-transition: -webkit-transform 0.1s;
@@ -88,7 +92,7 @@
   position: absolute;
   width: 100%;
   padding: 20px 0;
-  top:0;
+  top: 0;
   border-top: 1px solid #ddd;
 }
 
@@ -102,9 +106,10 @@
 
 #nav .social {
   position: absolute;
-  top: calc(100vh - 48px);
+  bottom: env(safe-area-inset-bottom);
   left: 0;
   border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
   display: flex;
   flex-direction: row;
 }
@@ -162,7 +167,7 @@
 
 #nav-container {
   display:flex;
-  height:calc(100vh - 40px);
+  height: 100%;
   width:100%;
   position:absolute;
   flex-direction: column;
@@ -343,9 +348,13 @@ padding-bottom:0px;
 #footer {
   display: block;
   position: fixed;
-  bottom: 0; left: 0; width: 100%;
+  bottom: 0;
+  left: 0;
+  width: 100%;
   background: #fff;
   border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  margin-bottom: env(safe-area-inset-bottom);
   z-index: 1;
 }
 #footer div {