导航菜单优化

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

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

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

@@ -906,4 +906,30 @@ p.flashsale-title {
 
 .page-bottom {
   margin-top: 50px;
-}
\ No newline at end of file
+}
+
+.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;
+    }
+  }
+}