diff --git a/assets/scss/layouts/header/_header.scss b/assets/scss/layouts/header/_header.scss index 2eda835d52..bc17701cca 100644 --- a/assets/scss/layouts/header/_header.scss +++ b/assets/scss/layouts/header/_header.scss @@ -22,11 +22,13 @@ top: 0; width: 100%; z-index: zIndex("higher"); + height: $header-height; @include breakpoint("medium") { border-bottom: container("border"); overflow: visible; position: relative; + height: auto; } &.is-open { @@ -42,6 +44,7 @@ font-size: 0; // 1 margin: 0 remCalc($header-toggle-width); // 2 text-align: center; + height: inherit; @include breakpoint("small") { // 4 margin-left: remCalc($header-toggle-width * 1.5); @@ -62,14 +65,16 @@ } } - > a { + &__link { @include clearfix; color: $storeName-color; - display: inline-block; - padding: $header-logo-paddingVertical 0; + height: inherit; + display: flex; + align-items: center; + margin: 0 auto; position: relative; text-decoration: none; - width: 60%; + width: 70%; z-index: zIndex("low"); // scss-lint:disable NestingDepth @@ -124,22 +129,17 @@ margin-left: auto; margin-right: auto; overflow: hidden; - padding: remCalc(3px) 0; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; @include breakpoint("small") { font-size: $fontSize-logo-medium; - padding-bottom: 0; - padding-top: 0; } @include breakpoint("medium") { display: inline; font-size: $fontSize-logo-large; - margin-left: 0; - margin-right: -(remCalc(2px)); // 3 max-width: none; overflow: auto; white-space: normal; diff --git a/assets/scss/settings/global/typography/_typography.scss b/assets/scss/settings/global/typography/_typography.scss index 2147a41bb7..75cb1edb91 100644 --- a/assets/scss/settings/global/typography/_typography.scss +++ b/assets/scss/settings/global/typography/_typography.scss @@ -43,8 +43,8 @@ $fontSize-smaller: stencilNumber("fontSize-h5"); $fontSize-smallest: stencilNumber("fontSize-h6"); $fontSize-tiny: 12px; $fontSize-logo-large: stencilNumber("logo_fontSize"); -$fontSize-logo-medium: $fontSize-logo-large - 6px; -$fontSize-logo-small: $fontSize-logo-medium - 2px; +$fontSize-logo-medium: 2.5vw; +$fontSize-logo-small: $fontSize-logo-medium - 0.25vw; // Line heights diff --git a/templates/components/common/store-logo.html b/templates/components/common/store-logo.html index 737fd43ce6..44cf987821 100644 --- a/templates/components/common/store-logo.html +++ b/templates/components/common/store-logo.html @@ -1,4 +1,4 @@ - + {{#if settings.store_logo.image}} {{#if theme_settings.logo_size '===' 'original'}} {{settings.store_logo.title}}