diff --git a/index.html b/index.html
index 16db8cf..72c9c2c 100644
--- a/index.html
+++ b/index.html
@@ -33,6 +33,7 @@ <h1>The purpose is to<br> teach, bring learning to people</h1>
             </div>
         </section>
 
+    <div class="nav-div">
         <nav id="sideNav">
 
         <ul>
@@ -46,7 +47,7 @@ <h1>The purpose is to<br> teach, bring learning to people</h1>
         </ul>
       </nav>
       <img src="images/menu.png" id="menuBtn">
-
+    </div>
 
       <!--about-->
 
diff --git a/style.css b/style.css
index 2955e0d..a19dbb4 100644
--- a/style.css
+++ b/style.css
@@ -80,7 +80,13 @@ p {
   top: 0;
   background: #f67c92;
   z-index: 2;
-  transition: 0.5s;
+  transition: 0.3s;
+  transform: translateX(100%);
+  transition: transform .4s cubic-bezier(.4, 0, .2, 1) .2s;
+}
+.nav-div:hover #sideNav {
+    transform: translateX(0);
+    transition-delay: 0.3s;
 }
 nav ul li {
   list-style: none;