diff --git a/src/Resources/app/storefront/src/scss/base.scss b/src/Resources/app/storefront/src/scss/base.scss index 1a0de79..33c719f 100644 --- a/src/Resources/app/storefront/src/scss/base.scss +++ b/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; + } } } diff --git a/src/Resources/views/storefront/layout/navbar/content.html.twig b/src/Resources/views/storefront/layout/navbar/content.html.twig new file mode 100644 index 0000000..5049c21 --- /dev/null +++ b/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 %} \ No newline at end of file