Merge pull request #21 from ElizabethBil/page-header

Add Mobile Menu Animation
ElizabethBil · Oct 3, 2023 · 4d0bdd7 · 4d0bdd7
2 parents 8d94adb + 2dfe10f
commit 4d0bdd7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -76,11 +76,10 @@
   background-repeat: no-repeat;
   background-size: 274px;
   background-position: center bottom;
+  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .is-hidden {
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
+  transform: translateX(100%);
 }
 .header-content-container {
   width: 274px;

diff --git a/src/partials/header.html b/src/partials/header.html
@@ -12,7 +12,9 @@
           <a href="./index.html#about-us" class="header-nav-link">about us</a>
         </li>
         <li class="header-nav-list-item">
-          <a href="#" class="header-nav-link">our collection</a>
+          <a href="./index.html#our-collection" class="header-nav-link"
+            >our collection</a
+          >
         </li>
         <li class="header-nav-list-item">
           <a href="./index.html#order-section" class="header-nav-link"
@@ -92,16 +94,24 @@
     </ul>
     <ul class="header-mobile-nav-list">
       <li class="header-nav-list-item">
-        <a href="#" class="header-mobile-nav-link">about us</a>
+        <a href="./index.html#about-us" class="header-mobile-nav-link"
+          >about us</a
+        >
       </li>
       <li class="header-nav-list-item">
-        <a href="#" class="header-mobile-nav-link">our collection</a>
+        <a href="./index.html#our-collection" class="header-mobile-nav-link"
+          >our collection</a
+        >
       </li>
       <li class="header-nav-list-item">
-        <a href="#" class="header-mobile-nav-link">customer order</a>
+        <a href="./index.html#order-section" class="header-mobile-nav-link"
+          >customer order</a
+        >
       </li>
       <li class="header-nav-list-item">
-        <a href="#" class="header-mobile-nav-link">testimonials</a>
+        <a href="./index.html#testimonials" class="header-mobile-nav-link"
+          >testimonials</a
+        >
       </li>
     </ul>
   </div>