fix: wrap under 350px

Author: solygambas

014-animated navigation/style.css

@@ -31,6 +31,7 @@ nav {
   border-radius: 3px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   transition: width 0.6s linear;
+  overflow-x: hidden;
 }
 
 nav.active {
@@ -44,7 +45,7 @@ nav ul {
   margin: 0;
   width: 0;
   transition: width 0.6s linear;
-  overflow-x: hidden;
+  gap: 20px;
 }
 
 nav.active ul {
@@ -66,7 +67,6 @@ nav ul a {
   position: relative;
   color: #000;
   text-decoration: none;
-  margin: 0 10px;
 }
 
 .icon {
@@ -105,3 +105,15 @@ nav.active .icon .line1 {
 nav.active .icon .line2 {
   transform: rotate(765deg) translateY(-5.5px);
 }
+
+@media (max-width: 350px) {
+  nav.active {
+    width: 100%;
+    height: 150px;
+  }
+
+  nav.active ul {
+    flex-direction: column;
+    gap: 10px;
+  }
+}