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 @@
-
+