dimmer

index.html

@@ -292,7 +292,7 @@ nav
     bottom: 0;
     right: 0px;
     width: 200px;
-    z-index: 10;
+    z-index: 200;
     height: 66px;
     overflow: hidden;
     transition: height 0.4s;
@@ -415,17 +415,40 @@ nav > ul
     width:100%;
     transform: translateY(-50%);
     transition:left 0.4s 0.5s;
+    list-style-type: none;
+}
+nav > ul a
+{
+    text-decoration: none !important;
+    color:black !important;
 }
 [nav-open] nav > ul
 {
     left:0%;
 }
+
+.Dim
+{
+    box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
+    z-index: 100;
+    position: fixed;
+    right: 0;
+    bottom: 0%;
+    height: 65px;
+    width: 100%;
+    background: #fff;
+    opacity: 0.8;
+    transition: height 0.4s;
+}
+[nav-open] .Dim
+{
+    height:100%;
+}
     </style>
     <nav>
         <span class="detail edge"></span>
         <span class="detail cap cap--top"></span>
         <span class="detail cap cap--bottom"></span>
-
         <ul>
             <li><a href="#top"  >Top</a></li>
             <li><a href="#order">Order</a></li>
@@ -434,9 +457,9 @@ nav > ul
             <li><a href="#specs">Specs</a></li>
             <li><a href="#email">Sign-up</a></li>
         </ul>
-
         <span class="button"></span>
     </nav>
+    <div class="Dim"></div>
     <main>
     <section id="order">