Конечный вариант шапки сайта

index.html

@@ -59,8 +59,8 @@
     </header>
 
     <dialog class="mobile-overlay visible-mobile" id="mobileOverlay">
-      <form class="modile-overlay__colse-button-wrapper" method="dialog">
-        <button class="mobil-overlay__close-button cross-button" type="submit">
+      <form class="mobile-overlay__close-button-wrapper" method="dialog">
+        <button class="mobile-overlay__close-button cross-button" type="submit">
           <span class="visually-hidden">Close navigation menu</span>
         </button>
       </form>

styles/_mixins.scss

@@ -17,7 +17,7 @@
 	border: none;
 }
 
-@mixin flex-center($isInline: flase) {
+@mixin flex-center($isInline: false) {
 	@if $isInline {
 		display: inline-flex;
 	} @else {

styles/blocks/_burger-button.scss

@@ -0,0 +1,23 @@
+.burger-button {
+	@include reset-button;
+	@include square(48px);
+
+	position: relative;
+	border-radius: var(--border-radius-small);
+
+	@include hover {
+		background-color: var(--color-accent);
+	}
+
+	&::after {
+		@include abs-center;
+
+		content: '';
+		width: 50%;
+		height: 2px;
+		background-color: var(--color-dark);
+		border-radius: 2px;
+
+		box-shadow: 0 -8px, 0 8px;
+	}
+}

styles/blocks/_cross-button.scss

@@ -0,0 +1,32 @@
+.cross-button {
+	@include reset-button;
+	@include square(48px);
+
+	position: relative;
+	border-radius: var(--border-radius-small);
+
+	@include hover {
+		background-color: var(--color-accent);
+	}
+
+	&::before,
+	&::after {
+		position: absolute;
+		content: '';
+		top: 48%;
+		left: 7px;
+		width: 70%;
+		height: 2px;
+		background-color: var(--color-dark);
+		border-radius: 5px;
+	}
+
+	&::before {
+		rotate: 45deg;
+	}
+
+	&::after {
+		rotate: -45deg;
+	}
+
+}

styles/blocks/_header.scss

@@ -5,6 +5,10 @@
 		padding-top: 30px;
 	}
 
+	@include mobile {
+		padding-top: 15px;
+	}
+
 	// .header__inner
 	&__inner {
 		display: flex;
@@ -22,6 +26,10 @@
 		@include tablet {
 			max-width: 120px;
 		}
+
+		@include mobile {
+			min-width: 140px;
+		}
 	}
 
 	// .header__menu

styles/blocks/_mobile-overlay.scss

@@ -0,0 +1,28 @@
+.mobile-overlay {
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	border: none;
+	padding: 14px 20px;
+
+	&:modal {
+		min-width: 100%;
+		min-height: 100%;
+	}
+
+	&__close-button-wrapper {
+		display: flex;
+		justify-content: end;
+	}
+
+
+	&__list {
+		@include flex-center;
+
+		flex-direction: column;
+		row-gap: 30px;
+
+		min-height: 80vh;
+
+	}
+}

styles/style.css

@@ -313,6 +313,39 @@ h4 {
   background-color: transparent;
 }
 
+.burger-button {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  width: 48px;
+  aspect-ratio: 1;
+  position: relative;
+  border-radius: var(--border-radius-small);
+}
+@media (hover: hover) {
+  .burger-button:hover {
+    background-color: var(--color-accent);
+  }
+}
+@media (hover: none) {
+  .burger-button:active {
+    background-color: var(--color-accent);
+  }
+}
+.burger-button::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  content: "";
+  width: 50%;
+  height: 2px;
+  background-color: var(--color-dark);
+  border-radius: 2px;
+  -webkit-box-shadow: 0 -8px, 0 8px;
+          box-shadow: 0 -8px, 0 8px;
+}
+
 .header {
   padding-top: 60px;
 }
@@ -321,6 +354,11 @@ h4 {
     padding-top: 30px;
   }
 }
+@media (max-width: 767px) {
+  .header {
+    padding-top: 15px;
+  }
+}
 .header__inner {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -347,6 +385,11 @@ h4 {
     max-width: 120px;
   }
 }
+@media (max-width: 767px) {
+  .header__logo {
+    min-width: 140px;
+  }
+}
 .header__menu {
   margin-left: auto;
   font-size: 20px;
@@ -417,4 +460,76 @@ h4 {
     padding-inline: 18px;
     font-size: 16px;
   }
+}
+.cross-button {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  width: 48px;
+  aspect-ratio: 1;
+  position: relative;
+  border-radius: var(--border-radius-small);
+}
+@media (hover: hover) {
+  .cross-button:hover {
+    background-color: var(--color-accent);
+  }
+}
+@media (hover: none) {
+  .cross-button:active {
+    background-color: var(--color-accent);
+  }
+}
+.cross-button::before, .cross-button::after {
+  position: absolute;
+  content: "";
+  top: 48%;
+  left: 7px;
+  width: 70%;
+  height: 2px;
+  background-color: var(--color-dark);
+  border-radius: 5px;
+}
+.cross-button::before {
+  rotate: 45deg;
+}
+.cross-button::after {
+  rotate: -45deg;
+}
+
+.mobile-overlay {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: none;
+  padding: 14px 20px;
+}
+.mobile-overlay:modal {
+  min-width: 100%;
+  min-height: 100%;
+}
+.mobile-overlay__close-button-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: end;
+}
+.mobile-overlay__list {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  row-gap: 30px;
+  min-height: 80vh;
 }/*# sourceMappingURL=style.css.map */

styles/style.scss

@@ -1,3 +1,8 @@
 @import 'normalize','fonts','mixins','media','variables','utils','globals';
 
-@import 'blocks/button','blocks/header';
+@import
+	'blocks/button',
+	'blocks/burger-button',
+	'blocks/header',
+	'blocks/cross-button',
+	'blocks/mobile-overlay';