add button for header

css/styles.css

@@ -119,6 +119,8 @@ header {
   }
 }
 .header-img {
+  display: flex;
+  justify-content: space-between;
   position: relative;
   width: 19.6%;
   margin-top: 1.8%;
@@ -129,6 +131,12 @@ header {
   width: 100%;
   height: 37%;
 }
+@media (max-width: 576px) {
+  .header-img img {
+    width: 50%;
+    height: 37%;
+  }
+}
 @media (max-width: 992px) {
   .header-img {
     height: 80px;
@@ -144,32 +152,64 @@ header {
 }
 @media (max-width: 576px) {
   .header-img {
-    margin-top: 15px;
+    margin-top: 13px;
     height: 92px;
-    width: 160px;
+    width: 100%;
   }
 }
-#header-img-navicon {
-  position: absolute;
-  display: none;
-}
-@media (max-width: 576px) {
+@media (min-width: 319px) {
   #header-img-navicon {
+    position: relative;
+    /* margin-left: 103px;
+    margin-top: -3px;*/
     display: inline-block;
     font-size: 36px;
     color: white;
-    left: 260px;
-    top: -15px;
+  }
+}
+@media (min-width: 576px) {
+  #header-img-navicon {
+    position: absolute;
+    display: none;
+    z-index: 0;
   }
 }
 #cat {
-  position: relative;
+  position: absolute;
   width: 80px;
   height: 80px;
-  background: #00ccff;
+  left: 1px;
+  top: 40px;
+  /*@media (min-width: 320px){
+   display: none;
+  }*/
+}
+@media (min-width: 577px) {
+  #cat {
+    display: none;
+  }
+}
+.header-link-mobile-container {
+  display: flex;
+}
+@media (max-width: 576px) {
+  .header-link-mobile {
+    font-size: 14px;
+    margin-right: 20px;
+  }
+}
+@media (max-width: 480px) {
+  .header-link-mobile {
+    font-size: 10px;
+    margin-right: 8px;
+  }
+}
+.header-link-mobile a {
+  font-family: SF-UI-Display-Black;
+  color: white;
 }
 .page-header__burger--active {
-  display: inline-block;
+  display: none;
 }
 .header-nav {
   position: relative;

css/styles.less

@@ -105,6 +105,8 @@ header {
   }
 }
 .header-img {
+  display: flex;
+  justify-content: space-between;
   position: relative;
   width: 19.6%;
   margin-top: 1.8%;
@@ -113,6 +115,10 @@ header {
     z-index: 3;
     width: 100%;
     height: 37%;
+    @media (max-width: 576px){
+      width: 50%;
+      height: 37%;
+    }
   }
   @media (max-width: 992px) {
     height: 80px;
@@ -124,30 +130,58 @@ header {
     width: 100px;
   }
   @media (max-width: 576px) {
-    margin-top: 15px;
+    margin-top: 13px;
     height: 92px;
-    width: 160px;
+    width: 100%;
   }
 }
 #header-img-navicon {
-  position: absolute;
-  display: none;
-  @media (max-width: 576px){
-    display: inline-block;
+   @media (min-width: 319px){
+    position: relative;
+ /* margin-left: 103px;
+    margin-top: -3px;*/
+   display: inline-block;
     font-size: 36px;
     color: white;
-    left: 260px;
-    top: -15px;
+  }
+  @media (min-width: 576px){
+    position: absolute;
+    display: none;
+    z-index: 0;
   }
 }
 #cat {
-  position: relative;
+  position: absolute;
   width: 80px;
   height: 80px;
-  background: #00ccff;
+  left: 1px;
+  top: 40px;
+  @media (min-width: 577px){
+   display: none;
+  }
+  /*@media (min-width: 320px){
+   display: none;
+  }*/
+}
+.header-link-mobile-container {
+  display: flex;
+}
+.header-link-mobile {
+  @media (max-width: 576px){
+  font-size: 14px;
+  margin-right: 20px;
+  }
+  @media (max-width: 480px) {
+    font-size: 10px;
+    margin-right: 8px;
+  }
+  a {
+     font-family: SF-UI-Display-Black;
+    color: white;
+  }
 }
 .page-header__burger--active {
-  display: inline-block;
+  display: none;
 }
 .header-nav {
   position: relative;

index.html

@@ -17,17 +17,32 @@
     <div class="main-container">
         <div class="header-container">
             <div class="header-wrapp">
-                <!--
-                <div id="cat" class="page-header__burger--active">
-                    hhh
-                </div>
-                -->
                 <div class="header-img">
-                    <button type="button" id="header-img-navicon">&#9776;</button>
-                    <!--<div id="header-img-navicon">
-                        &#9776;
-                    </div>-->
+                    <div>
                     <img src="img/header-logo.png">
+                    </div>
+                    <div id="header-img-navicon">
+                        &#9776;
+                    </div>
+                     <div id="cat" class="page-header__burger--active">
+                        <ul class="header-link-mobile-container">
+                            <li class="header-link-mobile">
+                                <a href="#">Продукт</a>
+                            </li>
+                            <li class="header-link-mobile">
+                                <a href="#">Цены</a>
+                            </li>
+                            <li class="header-link-mobile">
+                                <a href="#">Контакты</a>
+                            </li>
+                            <li class="header-link-mobile">
+                                <a href="#">Войти</a>
+                            </li>
+                            <li class="header-link-mobile">
+                                <a href="#">Зарегистрироваться</a>
+                            </li>
+                        </ul>
+                    </div>
                 </div>
                 <div class="header-nav">
                     <div class="header-link">
@@ -1211,4 +1226,12 @@
     });
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
+
+
+
+ $('#header-img-navicon').click(function(event) {
+        $('#cat').removeClass('page-header__burger--active');
+
+
+    });
\ No newline at end of file