Merge branch 'master' of http://47.99.244.21:9999/root/joshine

app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml

@@ -13,10 +13,12 @@
 $columnsLimit = $block->getColumnsLimit() ?: 0;
 $columnsLimit = $block->getColumnsLimit() ?: 0;
 $_menuHtml = $block->getHtml('level-top', 'submenu', $columnsLimit)
 $_menuHtml = $block->getHtml('level-top', 'submenu', $columnsLimit)
 ?>
 ?>
-
-<nav class="navigation" data-action="navigation">
+<div class="nav-sections">
+    <nav class="navigation" data-action="navigation">
         <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
         <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
             <?= /* @noEscape */ $_menuHtml?>
             <?= /* @noEscape */ $_menuHtml?>
             <?= $block->getChildHtml() ?>
             <?= $block->getChildHtml() ?>
         </ul>
         </ul>
-</nav>
+    </nav>
+</div>
+

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -922,3 +922,29 @@ footer{
 .page-bottom {
 .page-bottom {
   margin-top: 50px;
   margin-top: 50px;
 }
 }
+
+.navigation-wrapper{
+  padding-top: 10px;
+  padding-bottom: 10px;
+  background: #f2f2f2;
+  border-top: 1px solid #e1e1e1;
+  font-family: 'Outfit-Regular', sans-serif;
+  .nav-sections{
+    background: transparent;
+  }
+  .navigation li{
+    position: unset;
+  }
+  @media(min-width: 640px){
+    .navigation .active>a.level-top, .navigation .has-active>a.level-top{
+      background:none;
+    }
+    .navigation-wrapper .opened>a{
+      background:none;
+    }
+    .navigation-wrapper .submenu{
+      width: 100%;
+      margin-top: 16px;
+    }
+  }
+}