diff --git a/css/mobile-first-vs-desktop-first/demos/adaptive-layout/index.html b/css/mobile-first-vs-desktop-first/demos/adaptive-layout/index.html
index e213fb7e870..8dbf0623484 100644
--- a/css/mobile-first-vs-desktop-first/demos/adaptive-layout/index.html
+++ b/css/mobile-first-vs-desktop-first/demos/adaptive-layout/index.html
@@ -8,68 +8,192 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
     * {
       box-sizing: border-box;
     }
 
+    a {
+      color: inherit;
+    }
+
     body {
       font-family: Roboto, sans-serif;
       margin: 0;
       background-color: #18191c;
     }
 
+    header {
+      background-color: #2E9AFF;
+    }
+
     main {
-      margin: 8px;
+      display: flex;
+      flex-direction: column;
+      color: #2E9AFF;
+      padding: 8px;
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    pre {
+      margin: 0;
     }
 
     h1 {
-      text-align: center;
-      color: #2E9AFF;
+      margin: 0;
     }
 
-    .container {
-      display: flex;
-      row-gap: 8px;
+    .navbar {
+      padding: 8px;
+    }
+
+    .toggle-icon {
+      cursor: pointer;
+    }
+
+    .toggle-icon:hover,
+    a:hover {
+      opacity: .5;
+      transition: opacity 100ms ease-in-out;
+    }
 
+    .link_active {
+      text-decoration: underline;
+    }
+
+    .navbar__links_list {
+      display: flex;
       flex-direction: column;
+      gap: 16px;
+      margin: 8px 0 8px 0;
+      padding: 0;
+    }
+
+    .navbar__links_list>li {
+      list-style-type: none;
+    }
+
+    .navbar__links_list_hidden {
+      display: none;
+    }
+
+    .navbar__links_list_showed {
+      display: flex;
+    }
+
+    .active-styles-example {
+      width: fit-content;
+      margin-left: auto;
+      padding: 8px;
+      background-color: #ff8630;
+      color: #18191c;
+    }
+
+    #flex-direction,
+    #current-screen-width {
+      text-decoration: underline;
     }
 
     @media (width >=640px) {
-      .container {
-        flex-direction: row;
-        column-gap: 8px;
+      .toggle-icon {
+        display: none;
       }
-    }
 
-    .card {
-      padding: 55px 40px;
-      border: 1px solid black;
-      text-align: center;
-      border-radius: 4px;
-      background-color: #2E9AFF;
+      .navbar__links_list {
+        flex-direction: row;
+        margin: 0;
+      }
     }
   </style>
 </head>
 
 <body>
+  <header>
+    <nav class="navbar">
+      <i class="fa fa-bars toggle-icon" onclick="handleClick(this)"></i>
+      <ul class="navbar__links_list">
+        <li>
+          <a href="#" class="link_active">Интересные факты</a>
+        </li>
+        <li>
+          <a href="#">Происхождение</a>
+        </li>
+        <li>
+          <a href="#">История одомашнивания</a>
+        </li>
+        <li>
+          <a href="#">Физиология</a>
+        </li>
+      </ul>
+    </nav>
+  </header>
   <main>
-    <h1>Факты про кошек</h1>
-    <section class="container">
-      <article class="card">
-        В каждом кошачьем ухе находится более чем 30 мускулов.
-      </article>
-      <article class="card">
-        В среднем, коты спят по 16-18 часов в день, что составляет более 70% кошачьей жизни.
-      </article>
-      <article class="card">
-        Кошки не чувствуют вкуса сладкого.
-      </article>
-      <article class="card">
-        У кошек и людей за управление эмоциональным состоянием отвечают одинаковые отделы головного мозга.
-      </article>
-    </section>
+    <h1>Интересные факты</h1>
+    <ul>
+      <li>В каждом кошачьем ухе находится более чем 30 мускулов.</li>
+      <li>В среднем, коты спят по 16-18 часов в день, что составляет более 70% кошачьей жизни.</li>
+      <li>Кошки не чувствуют вкуса сладкого.</li>
+      <li> У кошек и людей за управление эмоциональным состоянием отвечают одинаковые отделы головного мозга.</li>
+    </ul>
+
+    <div class="active-styles-example">
+      <h3>Текущая ширина экрана:
+        <span id="current-screen-width"></span> px
+      </h3>
+
+      <div>.navbar__links_list {</div>
+      <div>&nbsp;&nbsp; flex-direction:
+        <span id="flex-direction"></span>;
+      </div>
+      <div>}</div>
+    </div>
   </main>
+
+  <script>
+    const toggleIcon = document.querySelector('i');
+    const linksList = document.querySelector('ul');
+    const flexDirection = document.getElementById('flex-direction');
+    const screenWidth = document.getElementById('current-screen-width');
+
+    let isOpen = false;
+
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+
+    function handleResize() {
+      screenWidth.innerText = window.innerWidth;
+
+      if (window.innerWidth >= 640) {
+        linksList.classList.remove('navbar__links_list_hidden')
+        linksList.classList.add('navbar__links_list_showed')
+        flexDirection.innerText = 'row'
+      } else {
+        flexDirection.innerText = 'column'
+
+        if (!isOpen) {
+          linksList.classList.remove('navbar__links_list_showed')
+          linksList.classList.add('navbar__links_list_hidden')
+        }
+      }
+    }
+
+    function handleClick() {
+      if (isOpen) {
+        linksList.classList.remove('navbar__links_list_showed')
+        linksList.classList.add('navbar__links_list_hidden')
+        isOpen = false
+      } else {
+        linksList.classList.remove('navbar__links_list_hidden')
+        linksList.classList.add('navbar__links_list_showed')
+        isOpen = true
+      }
+    }
+  </script>
 </body>
 
 </html>
diff --git a/css/mobile-first-vs-desktop-first/index.md b/css/mobile-first-vs-desktop-first/index.md
index 4409350a5a2..db96b939f8f 100644
--- a/css/mobile-first-vs-desktop-first/index.md
+++ b/css/mobile-first-vs-desktop-first/index.md
@@ -97,4 +97,4 @@ Google преимущественно использует мобильную в
   }
 ```
 
-<iframe title="Адаптивная верстка" src="demos/adaptive-layout/" height="300"></iframe>
+<iframe title="Адаптивная навигация" src="demos/adaptive-navbar/" height="300"></iframe>
