modified: styles/style.css

styles/style.css

@@ -1042,6 +1042,7 @@ ul {
 
 @media (max-width: 780px) {
 	.navigation__menu {
+		position: relative;
 		display: none;
 	}
 
@@ -1056,7 +1057,7 @@ ul {
 	.menu::before {
 		content: "";
 		position: absolute;
-		transition: all 0.3s ease-in-out;
+		transition: all 0.1s ease-in-out;
 	}
 
 	.menu,
@@ -1066,8 +1067,6 @@ ul {
 		width: 30px;
 		border-radius: 9999px;
 		background-color: var(--primary);
-		transition: all 0.3s ease-in-out;
-		animation: 4s linear animatedMenu;
 	}
 
 	.menu::after {
@@ -1081,20 +1080,60 @@ ul {
 	}
 
 	.menu.menu-active {
-		z-index: 1;
+		z-index: 2;
 		width: 0;
-		transition: all 0.3s ease-in-out;
+		transition: width 0.1s ease-in-out 0.2s;
 	}
 
 	.menu.menu-active::after {
 		top: 0;
-		transform: rotate(45deg);
-		transition: all 0.3s ease-in-out;
+		transition: top 0.1s ease-in-out;
 	}
 
 	.menu.menu-active::before {
 		bottom: 0;
+		transition: bottom 0.1s ease-in-out;
+	}
+
+	.menu.menu-active::after {
+		transform: rotate(45deg);
+		transition: transform 0.1s ease-in-out 0.3s;
+	}
+
+	.menu.menu-active::before {
 		transform: rotate(-45deg);
-		transition: all 0.3s ease-in-out;
+		transition: transform 0.1s ease-in-out 0.3s;
+	}
+
+	.navigation__menu.navigation-active {
+		position: absolute;
+		display: block;
+		width: 100%;
+		height: 100vh;
+		z-index: 1;
+		top: 0;
+		right: 0;
+		background-color: #f3c98b;
+		padding: 0;
+		margin: 0;
+	}
+
+	.navigation__menu-list {
+		display: flex;
+		flex-direction: column;
+		margin-top: 10rem;
+	}
+
+	.navigation__menu.navigation-active .navigation__link {
+		display: block;
+		font-size: 2.5rem;
+		margin: 1rem auto;
+	}
+
+	.regestration {
+		margin: 2rem 0 0 0;
+		display: block;
+		padding: 2rem 5rem;
+		font-size: 2.5rem;
 	}
 }