Merge pull request girlscript#29 from girlscript/revert-28-revert-27-…

…pvanshika Revert "Revert "auto-hide feature added to navbar""
Harshita248 · Sep 9, 2020 · 881c753 · 881c753
2 parents ec39c06 + 6502aed
commit 881c753
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git 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
@@ -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;