style dropdown navigation menu

HectorVilas · Apr 29, 2023 · b3967d4 · b3967d4
1 parent ccd7dd0
commit b3967d4
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/styles/header.css b/styles/header.css
@@ -158,11 +158,18 @@ header {
 
 @media only screen and (max-width: 800px) {
   #navigation {
+    --gap: 5px;
+    display: none;
     position: absolute;
     top: 100%;
     right: 0;
     background-color: var(--color-1);
     flex-direction: column;
+    gap: var(--gap);
+    padding: 10px;
+  }
+  #navigation.nav-show {
+    display: flex;
   }
 
   #menu-button {
@@ -172,7 +179,8 @@ header {
   .nav-sections {
     flex-direction: column;
     border-right: none;
-    border-bottom: var(--separator);
+    /* border-bottom: var(--separator); */
+    gap: var(--gap);
   }
 
   .nav-sections li {
@@ -182,17 +190,18 @@ header {
   .nav-icons {
     padding-left: 20px;
     flex-direction: column;
-    /* align-items: flex-end; */
     width: 100%;
+    gap: var(--gap);
   }
 
   .nav-icon {
     background-image: none;
   }
   .nav-icon::after {
     position: absolute;
-    /* left: 100%; */
     font-size: 1.25rem;
+    font-family: 'Nunito Sans', sans-serif;
+    font-weight: 300;
   }
   .nav-search::after {
     content: "Search";
@@ -208,8 +217,11 @@ header {
   }
   .nav-favorites-count,
   .nav-cart-count {
-    /* display: inline-block; */
-    /* right: 0; */
-    display: none;
+    display: inline-block;
+    right: 100%;
+    opacity: .75;
+  }
+  .nav-icon.has-content {
+    background-image: none;
   }
 }