fix flyout menu

src/Resources/app/storefront/src/scss/base.scss

@@ -212,8 +212,54 @@ strong {
   font-weight: 400;
   padding: 5px 0;
 
-  .navigation-flyout {
+  .dropdown-menu {
     background: #f2effb;
+    font-family: $sw-font-family-base;
+    border: 0;
+    width: 100vw;
+    left: 50%;
+    transform: translateX(-50%);
+    position: absolute;
+    padding-bottom: 2rem;
+    box-shadow: 0 43px 43px -6px rgba(0,0,0,.2);
+
+    > * {
+      --bs-gutter-x: 0;
+      max-width: 1340px; // Or your container max-width
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    > .row:first-child {
+      margin-bottom: 2rem;
+    }
+
+    > .row:nth-child(2) {
+      padding-left: .5rem;
+    }
+
+    .navigation-flyout-content .navigation-flyout-categories.is-level-0 > .col-4 {
+      position: relative;
+      margin-bottom: 30px;
+
+      a.nav-item {
+        padding: 0 0.5rem;
+      }
+    }
+
+    .navigation-flyout-content .navigation-flyout-categories.is-level-0 > .col-4::before {
+      border-left: 1px solid #798490;
+      content: "";
+      height: 100%;
+      left: 15px;
+      position: absolute;
+      top: 0;
+    }
+
+    .navigation-flyout-link {
+      color: #4a545b;
+      font-size: 16px;
+    }
   }
 }
 

src/Resources/views/storefront/layout/navbar/content.html.twig

@@ -0,0 +1,6 @@
+{% sw_extends '@Storefront/storefront/layout/navbar/content.html.twig' %}
+
+{% block layout_navbar_content_row_category_link_text %}
+    {{ parent() }}
+    {% sw_icon 'arrow-right' style { 'pack': 'solid', 'color': 'primary' } %}
+{% endblock %}