transfer pseudo button to the list

ReshetS · Apr 14, 2024 · 3d6e707 · 3d6e707
1 parent 560320a
commit 3d6e707
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 46 deletions.
diff --git a/src/css/header.css b/src/css/header.css
@@ -16,13 +16,6 @@
   width: 100%;
 }
 
-.footer-logo-link {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  justify-content: center;
-}
-
 .header-logo-link{
   display: flex;
   align-items: center;
@@ -33,17 +26,17 @@
   fill: #FBFBFB;
 }
 
-.button-menu-open-mob {
+.button-menu-open{
+  display: block;
   stroke: #FBFBFB;
   background-color: transparent;
   border: none;
 }
-
-.button-menu-open-td {
+.open-menu-tablet {
   display: none;
 }
 
-.header-logo-tab, .menu{
+.header-logo-tab, .nav{
   display: none;
 }
 
@@ -53,22 +46,26 @@
     top: 32px;
   }
 
-    .header-logo-link {
-      gap: 8px;
-    }
+  .header-logo-link {
+    gap: 8px;
+  }
 
-  .button-menu-open-td {
-    display: block;
+  .button-menu-open {
     height: 40px;
-    stroke: #FBFBFB;
-    background-color: transparent;
-    border: none;
   }
 
   .button-menu-open-mob, .header-logo-mob {
     display: none;
   }
 
+  .open-menu-mobile{
+    display: none;
+  }
+
+  .open-menu-tablet{
+    display: inline;
+  }
+
   .open-menu-tablet-icon {
     stroke: #FBFBFB;
     background-color: transparent;
@@ -90,17 +87,23 @@
       display: none;  
     }
 
-    .menu{
+    .nav{
       display: flex;
       align-items: center;
-      gap: 20px;
     }
 
     .nav-list{
-      display: flex;
-      gap: 8px;
+      display: flex;  
     }
 
+    .nav-item:not(:last-child){
+      margin-right: 8px;
+    }
+
+    .nav-item:nth-last-child(2) {
+      margin-right: 20px;
+      }
+
     .nav-link{
       padding: 12px;
       border: 1px solid rgba(251, 251, 251, 0.4);
@@ -110,6 +113,10 @@
       letter-spacing: -0.02em;
     }
 
+    .button-menu-open{
+      display: none;
+    }
+
     .shop-now{
       border-radius: 30px;
       padding: 16px 32px;

diff --git a/src/partials/header.html b/src/partials/header.html
@@ -15,35 +15,33 @@
           <use href="./img/icons.svg#big-green-harvest"></use>
         </svg>
       </a>
-      <div class="menu">
-        <nav class="nav">
-          <ul class="nav-list">
-            <li class="nav-item">
-              <a href="#how-it-works" class="nav-link">How it works</a>
-            </li>
-            <li class="nav-item">
-              <a href="#vegetables" class="nav-link">Vegetables</a>
-            </li>
-            <li class="nav-item">
-              <a href="#reviews" class="nav-link">Reviews</a>
-            </li>
-          </ul>
-        </nav>
-        <a href="#your-order" class="shop-now">shop now</a>
-      </div>
-      <button type="button" class="button-menu-open-mob">
-        <svg width="32" height="32">
+      <nav class="nav">
+        <ul class="nav-list">
+          <li class="nav-item">
+            <a href="#how-it-works" class="nav-link">How it works</a>
+          </li>
+          <li class="nav-item">
+            <a href="#vegetables" class="nav-link">Vegetables</a>
+          </li>
+          <li class="nav-item">
+            <a href="#reviews" class="nav-link">Reviews</a>
+          </li>
+          <li class="nav-item">
+            <a href="#your-order" class="shop-now">shop now</a>
+          </li>
+        </ul>
+      </nav>
+      <button type="button" class="button-menu-open">
+        <svg class="open-menu-mobile" width="32" height="32">
           <use
             class="open-menu-mob-icon"
-            href="../img/icons.svg#mini-icon-menu-open"
+            href="./img/icons.svg#mini-icon-menu-open"
           ></use>
         </svg>
-      </button>
-      <button type="button" class="button-menu-open-td">
-        <svg width="40" height="40">
+        <svg class="open-menu-tablet" width="40" height="40">
           <use
             class="open-menu-tablet-icon"
-            href="../img/icons.svg#big-icon-menu-open"
+            href="./img/icons.svg#big-icon-menu-open"
           ></use>
         </svg>
       </button>