figma_adp_tablet_final

index.html

@@ -116,6 +116,7 @@
                         </button>
                     </div>
                 </div>
+                <!--  NOT ACTIVE  -->
                 <div class="header_top_list">
                     <div class="header_nav">
                         <!-- 1 -->
@@ -138,14 +139,6 @@
                         <div class="header_nav_item">
                             <a class="header_nav_link" href="#">Мобильные приложения</a>
                         </div>
-                        <!-- TABLET -->
-                         <div class="header_nav_item header_nav_item-reverse">
-                            <a class="header_nav_link-reverse" href="#">
-                              <span class="link-text">Больше услуг</span>
-                              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 8.22851L17 8.22852M17 8.22852L10 1.22852M17 8.22852L10 15.2285" stroke="#0C47A0" stroke-linecap="round" stroke-linejoin="round"/>
-</svg></a>
-                        </div>
                         <!-- 6 -->
                         <div class="header_nav_item header_nav_item-empty">
                             <a class="header_nav_link" href="#">Брендинг</a>
@@ -158,8 +151,34 @@
                         <div class="header_nav_item header_nav_item-empty">
                             <a class="header_nav_link" href="#">Лендинги</a>
                         </div>
+                        <!-- TABLET -->
+                        <div class="header_nav_item header_nav_item-reverse">
+                          <a class="header_nav_link-reverse" href="#">
+                              <span class="link-text">Больше услуг</span>
+                              <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 8.22851L17 8.22852M17 8.22852L10 1.22852M17 8.22852L10 15.2285" stroke="#0C47A0" stroke-linecap="round" stroke-linejoin="round"/>
+</svg></a>
+                        </div>
                     </div>
                 </div>
+                <div class="dropdown-list">
+                  <div class="dropdown-list_wrapper">
+                    <!-- 6 -->
+                        <div class="header_nav_item header_nav_item-show">
+                            <a class="header_nav_link header_nav_link-show" href="#">Брендинг</a>
+                        </div>
+                        <!-- 7 -->
+                        <div class="header_nav_item header_nav_item-show">
+                            <a class="header_nav_link header_nav_link-show" href="#">SEO-продвижение</a>
+                        </div>
+                        <!-- 8 -->
+                        <div class="header_nav_item header_nav_item-show">
+                            <a class="header_nav_link header_nav_link-show" href="#">Лендинги</a>
+                        </div>
+                  </div>
+                </div>
+                  <!-- BURGER- MENU -->
+                  <div class="header_nav_item header_nav_item-show">
                 <div class="header_top_list_active">
                   <div class="top_list_btn_burger"><button class="top_list_btn">Предоставляемые услуги <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.75 6.75H16.75M16.75 6.75L10.75 0.75M16.75 6.75L10.75 12.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
@@ -199,7 +218,7 @@
                         </div>
                     </div>
                 </div>
-            </div>
+                  </div>
         </header>
         <div class="container">
         <section class="header_body">

style.css

@@ -35,6 +35,10 @@ html, body, * {
 .header_top_list {
     display: flex;  
     width: 100%;
+    margin: 20px 0;
+}
+.header_nav_item-empty {
+  display: block;
 }
 .logo_link {
     margin: 0;
@@ -125,9 +129,6 @@ html, body, * {
 .header_call_text {
     color: #fff;
 }
-.header_top_list {
-    margin: 20px 0;
-}
 .header_nav {
     margin: 0;
     display: flex;
@@ -143,8 +144,7 @@ html, body, * {
     justify-content: space-between;
     align-items: center;
     white-space: nowrap;
-    padding: 10px;
+    padding: 10px 0;
-    width: 500px;
 }
 .header_nav_item-reverse {
   display: none;
@@ -227,9 +227,6 @@ html, body, * {
 .header_top_list_active {
   display: none;
 }
-.header_top_list {
-  display: block;
-}
 /* --------------------------------------------------------------------------------------------- */
 .header_row_info {
     display: flex;
@@ -1133,10 +1130,6 @@ html, body, * {
   .wrapper {
   max-width: 1200px;
 }
-.header_nav_item-empty {
-  display: none;
-}
-
 .header_nav_item-reverse {
   display: block;
 }
@@ -1248,7 +1241,9 @@ html, body, * {
 }
 .header_nav_item-show {
   margin: 0;
-  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .dropdown-list_wrapper {
   display: flex;
@@ -1292,6 +1287,12 @@ html, body, * {
 .accordion-item.active .blue-square {
   margin: 15px;
 }
+.header_nav_item-empty {
+  display: none;
+}
+.header_nav_item-show {
+  display: block;
+}
 
 }
 
@@ -1629,17 +1630,6 @@ body.lock {
   padding: 15px;
   border-radius: 33px;
 }
-.top_list_btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  background-color: #F4F4F4;
-  padding: 13px 0px;
-  width: 100%;
-  border-radius: 33px;
-  font-weight: 500;
-}
 .top_list_btn svg {
   margin: 0;
 }
@@ -1668,8 +1658,8 @@ body.lock {
 
 .header_nav_burger.open {
   margin: 0;
-  width: 500px;
+  max-height: 500px;
-  max-height: 500px; /* подстрой под контент */
+  padding: 10px 0; /* подстрой под контент */
 }
 .header_nav {
   display: none;
@@ -1680,18 +1670,37 @@ body.lock {
   align-items: center;
 }
 .top_list_btn_burger {
-  margin: 0;
   width: 100%;
-  margin-bottom: 20px;
+}
+
+.top_list_btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  width: 100%;
+  height: 100%;
+  padding: 15px 0;
+  background: #F4F4F4;
+  border: none;
+  border-radius: 33px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.top_list_btn svg {
+  pointer-events: none; /* чтобы клик шел по кнопке, а не по svg */
 }
 .header_nav_item {
   display: flex;
   border-radius: 33px;
-  padding: 13px 0px;
+}
-  background-color: #F4F4F4;
+.dropdown-list {
-  margin-bottom: 20px;
+  display: none;
 }
 .header_top_list_active {
+  width: 100%;
+  margin: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1707,5 +1716,19 @@ body.lock {
 .footer_chart_content {
   width: 71%;
 }
+.header_nav_item {
+  margin: 0;
+  padding: 10px 0;
+}
+.header_nav_link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 13px 0px;
+  width: 500px;
+  background-color: #F4F4F4;
+  border-radius: 33px;
+
+}
 
 }