diff --git a/assets/base.css b/assets/base.css index 482f8777831..4016f7dae31 100644 --- a/assets/base.css +++ b/assets/base.css @@ -2294,7 +2294,7 @@ product-info .loading-overlay:not(.hidden) ~ *, .header { display: grid; grid-template-areas: 'left-icons heading icons'; - grid-template-columns: 1fr auto 1fr; + grid-template-columns: 1fr 2fr 1fr; align-items: center; } @@ -2310,7 +2310,7 @@ product-info .loading-overlay:not(.hidden) ~ *, .header--top-left.drawer-menu, .header--middle-left.drawer-menu { grid-template-areas: - 'left-icons heading icons'; + 'navigation heading icons'; grid-template-columns: auto 1fr auto; column-gap: 1rem; } @@ -2321,10 +2321,6 @@ product-info .loading-overlay:not(.hidden) ~ *, column-gap: 2rem; } - .header--middle-center { - grid-template-areas: 'left-icons heading icons'; - } - .header--middle-center:not(.drawer-menu) { grid-template-areas: 'navigation heading icons'; grid-template-columns: 1fr auto 1fr; @@ -2411,8 +2407,8 @@ product-info .loading-overlay:not(.hidden) ~ *, } @media screen and (min-width: 990px) { - header.header--middle-left .header__heading-link, - header.header--top-left .header__heading-link { + .header--middle-left .header__heading-link, + .header--top-left .header__heading-link { margin-left: -0.75rem; } @@ -2421,6 +2417,12 @@ product-info .loading-overlay:not(.hidden) ~ *, justify-self: start; } + .header--middle-center .header__heading-link, + .header--middle-center .header__heading { + justify-self: center; + text-align: center; + } + .header--top-center .header__heading-link, .header--top-center .header__heading { justify-self: center; @@ -2497,20 +2499,16 @@ menu-drawer + .header__search { .header > .header__search { grid-area: left-icons; justify-self: start; - margin-left: 3.2rem; } -.header:not(.drawer-menu) > .header__search { - margin-left: 0; +.header--top-center.drawer-menu > .header__search { + margin-left: 3.2rem; } -header-drawer { +.header--top-center header-drawer { grid-area: left-icons; - justify-self: start; } - - .header:not(.header--has-menu) * > .header__search { display: none; } diff --git a/sections/header.liquid b/sections/header.liquid index 53f55af59d2..aa8e3ed5955 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -662,7 +662,7 @@ {%- if settings.cart_type == "notification" -%} - {%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%} + {%- render 'cart-notification', color_scheme: section.settings.color_scheme, desktop_menu_type: section.settings.menu_type_desktop -%} {%- endif -%} {% javascript %} diff --git a/snippets/cart-notification.liquid b/snippets/cart-notification.liquid index 2ae60e7863b..2154f1df0bc 100644 --- a/snippets/cart-notification.liquid +++ b/snippets/cart-notification.liquid @@ -3,7 +3,7 @@ Accepts: - color_scheme: {String} sets the color scheme of the notification (optional) - - desktop_menu_type: {String} sets the desktop menu type which allows us to use the right css class using the snippet in the header (optinal) + - desktop_menu_type: {String} passes the desktop menu type which allows us to use the right css class (optional) Usage: {% render 'cart-notification' %}