Center mega menu (#1482)

Shopify · Mar 15, 2022 · a3c30ed · a3c30ed
1 parent b2083ac
commit a3c30ed
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css
@@ -56,6 +56,18 @@
   transition: text-decoration var(--duration-short) ease;
 }
 
+.header--top-center .mega-menu__list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  column-gap: 0;
+}
+
+.header--top-center .mega-menu__list > li {
+  width: 16%;
+  padding-right: 2.4rem;
+}
+
 .mega-menu__link:hover,
 .mega-menu__link--active {
   color: rgb(var(--color-foreground));

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -426,7 +426,7 @@
                       <summary class="header__menu-item list-menu__item link focus-inset">
                         <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                         {% render 'icon-caret' %}
-                      </summary>               
+                      </summary>
                       <div id="MegaMenu-Content-{{ forloop.index }}" class="mega-menu__content gradient motion-reduce global-settings-popup" tabindex="-1">
                         <ul class="mega-menu__list page-width{% if link.levels == 1 %} mega-menu__list--condensed{% endif %}" role="list">
                           {%- for childlink in link.links -%}