diff --git a/src/build/template.html b/src/build/template.html
index 92eecf9f..f904af0e 100644
--- a/src/build/template.html
+++ b/src/build/template.html
@@ -38,6 +38,7 @@
       --nav-bottom: 0px;
       --main-content-pad-top: 0px;
       --main-content-pad-bottom: var(--main-content-pad-vertical);
+      --toast-gap-bottom: var(--nav-total-height);
     }
   </style>
 
diff --git a/src/routes/_components/snackbar/Snackbar.html b/src/routes/_components/snackbar/Snackbar.html
index fb8ca44c..d9e90d97 100644
--- a/src/routes/_components/snackbar/Snackbar.html
+++ b/src/routes/_components/snackbar/Snackbar.html
@@ -21,14 +21,14 @@
 <style>
   .snackbar-modal {
     position: fixed;
-    bottom: 0;
+    bottom: var(--toast-gap-bottom);
     left: 0;
     right: 0;
     transition: transform 333ms ease-in-out;
     display: flex;
     flex-direction: column;
     align-items: center;
-    z-index: 99000;
+    z-index: 90; /* lower than the Nav.html .main-nav which is 100 */
     transform: translateY(100%);
   }
 
diff --git a/src/routes/_components/toast/Toast.html b/src/routes/_components/toast/Toast.html
index b976430f..8b4f36ac 100644
--- a/src/routes/_components/toast/Toast.html
+++ b/src/routes/_components/toast/Toast.html
@@ -6,7 +6,7 @@
 <style>
   .toast-modal {
     position: fixed;
-    bottom: 40px;
+    bottom: calc(40px + var(--toast-gap-bottom));
     left: 0;
     right: 0;
     opacity: 0;
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 45fbd73e..9531287a 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -65,7 +65,7 @@
   // Used for moving the nav bar to the bottom
   --nav-top: 0px;
   --nav-bottom: initial;
-
+  --toast-gap-bottom: 0px; // used to position the Toast and Snackbar above the bottom nav
 
   //
   // focus outline