burger menu

index.html

@@ -2043,6 +2043,18 @@
         $('body,html').animate({scrollTop: top}, 1500);
     });
 
+    $(window).on("scroll", function () {
+      if ($(window).scrollTop() > 0) {
+      $(".burger").addClass("burger--follow");
+    } else {
+      $(".burger").removeClass("burger--follow");
+    }
+    })
+    $(".burger").on("click", function (e) {
+      e.preventDefault();
+      $(".header_top").toggleClass("header_top--open");
+    });
+
     </script>
     <!-- <script async
     src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap">

style.css

@@ -1446,8 +1446,23 @@ body {
 @media (max-width: 1100px) {
   .burger {
     display: block;
-    position: absolute;
-    top: 30px;
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 150;
+    height: 60px;
+    width: 60px;
+    border-radius: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    transition: all .3s;
+  }
+  .burger--follow {
+    background-color: #fff;
+    box-shadow: 0px 4px 60px 0px #444;
+    top: 10px;
     right: 15px;
   }
   .burger span {
@@ -1468,7 +1483,54 @@ body {
     border-radius: 3px;
   }
   .header_top {
-    position: absolute;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    z-index: 100;
+    min-width: 320px;
+    transform: translateX(100%);
+    transition: all .3s;
   }
+  .header_top--open {
+    transform: translateX(0%);
+  }
+  .header_top_inner {
+    flex-direction: column;
+    height: 100%;
+    justify-content: space-between;
+    padding: 100px 0;
+  }
+  .header_logo {
+    margin: 0;
+  }
+  .header_nav {
+    text-align: center;
+    margin: 0 auto;
+  }
+  .header_nav-list {
+    flex-direction: column;
+  }
+  .header_nav_item {
+    margin: 0;
+  }
+  .header_nav_link {
+    display: block;
+    padding: 30px;
+  }
+  .header_btn_box {
+    flex-direction: column-reverse;
+
+  }
+  .haeder_top_btn {
+    margin: 0;
+  }
+  .header_user-nav {
+    margin-bottom: 30px;
+  }
+
+
+
+
 }
-/* @media (max-width: 100){} */