Дополнение для Навбара

src/blocks/main-nav/main-nav.less

@@ -5,84 +5,6 @@
 
 .main-nav {
 
-  &__toggler {
-    position: relative;
-    z-index: 1;
-    top: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    width: 4rem;
-    height: 4rem;
-    line-height: 4rem;
-    padding: 0.5rem;
-    user-select: none;
-    cursor: pointer;
-    color: @text-color;
-    background-color: @gray-lighter;
-    border: 1px solid @gray-light;
-    border-radius: @border-radius;
-
-    @media (min-width: @screen-lg) {
-      display: none;
-    }
-  }
-
-  &__toggler-icon {
-    display: inline-block;
-    vertical-align: bottom;
-    width: 100%;
-    height: 0.3rem;
-    background: currentColor;
-    border-radius: 0.2rem;
-    position: relative;
-    transition: background 0.3s 0.3s;
-
-    &:before,
-    &:after {
-      width: 100%;
-      height: 0.3rem;
-      background: currentColor;
-      border-radius: 0.2rem;
-      position: absolute;
-      left: 0;
-      content: '';
-      transform-origin: 50% 50%;
-      transition: top 0.3s 0.3s, transform 0.3s;
-    }
-
-    &:before {
-      top: 1rem;
-    }
-
-    &:after {
-      top: -1rem;
-    }
-  }
-
-  &__toggler-checkbox {
-    &:checked {
-      & ~ .main-nav__toggler .main-nav__toggler-icon {
-        transition: background .3s 0;
-        background: transparent;
-
-        &:before,
-        &:after {
-          transition: top 0.3s, transform 0.3s 0.3s;
-          top: 0;
-        }
-
-        &:before {
-          transform: rotate3d(0, 0, 1, 45deg);
-        }
-
-        &:after {
-          transform: rotate3d(0, 0, 1, -45deg);
-        }
-      }
-    }
-  }
-
   &__list {
     padding: 0;
     list-style: none;

src/blocks/navbar/navbar.less

@@ -10,7 +10,7 @@
   &__inner {
     .container();
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
   }
 
@@ -21,8 +21,104 @@
   &__right {
     flex-grow: 1;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
+
+    @media (min-width: @screen-lg) {
+      justify-content: flex-start;
+    }
+  }
+
+  &__toggler {
+    position: relative;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    width: 4rem;
+    height: 4rem;
+    line-height: 4rem;
+    padding: 0.5rem;
+    user-select: none;
+    cursor: pointer;
+    color: @text-color;
+    background-color: @gray-lighter;
+    border: 1px solid @gray-light;
+    border-radius: @border-radius;
+
+    @media (min-width: @screen-lg) {
+      display: none;
+    }
+  }
+
+  &__toggler-icon {
+    display: inline-block;
+    vertical-align: bottom;
+    width: 100%;
+    height: 0.3rem;
+    background: currentColor;
+    border-radius: 0.2rem;
+    position: relative;
+    transition: background 0.3s 0.3s;
+
+    &:before,
+    &:after {
+      width: 100%;
+      height: 0.3rem;
+      background: currentColor;
+      border-radius: 0.2rem;
+      position: absolute;
+      left: 0;
+      content: '';
+      transform-origin: 50% 50%;
+      transition: top 0.3s 0.3s, transform 0.3s;
+    }
+
+    &:before {
+      top: 1rem;
+    }
+
+    &:after {
+      top: -1rem;
+    }
+  }
+
+  &__toggler-checkbox {
+    &:checked {
+      & ~ .navbar__toggler .navbar__toggler-icon {
+        transition: background .3s 0;
+        background: transparent;
+
+        &:before,
+        &:after {
+          transition: top 0.3s, transform 0.3s 0.3s;
+          top: 0;
+        }
+
+        &:before {
+          transform: rotate3d(0, 0, 1, 45deg);
+        }
+
+        &:after {
+          transform: rotate3d(0, 0, 1, -45deg);
+        }
+      }
+
+      & ~ .navbar__content {
+        display: block;
+      }
+    }
+  }
+
+  &__content {
+    display: none;
+    width: 100%;
+
+    @media (min-width: @screen-lg) {
+      display: block;
+    }
   }
 
   &__form {

src/blocks_library.html

@@ -28,11 +28,12 @@
         </a>
       </div>
       <div class="navbar__right">
-        <nav class="main-nav">
-          <input class="main-nav__toggler-checkbox" type="checkbox" id="main-menu-show-toggler" style="display:none!important;">
-          <label class="main-nav__toggler" for="main-menu-show-toggler">
-            <span class="main-nav__toggler-icon"></span>
+        <input class="navbar__toggler-checkbox" type="checkbox" id="navbar-toggler" style="display:none!important;">
+        <label class="navbar__toggler" for="navbar-toggler">
+          <span class="navbar__toggler-icon"></span>
         </label>
+        <div class="navbar__content">
+          <nav class="main-nav">
             <ul class="main-nav__list">
               <li class="main-nav__item">
                 <a href="" class="main-nav__link">
@@ -88,6 +89,7 @@
         </div>
       </div>
     </div>
+  </div>
 </header>
 
 <section class="container  blocks-library">