diff --git a/packages/ffe-header/less/ffe-header.less b/packages/ffe-header/less/ffe-header.less index 7701ebf6e3..7d4536c4be 100644 --- a/packages/ffe-header/less/ffe-header.less +++ b/packages/ffe-header/less/ffe-header.less @@ -21,16 +21,21 @@ } &__wrapper { - display: grid; - column-gap: var(--ffe-spacing-md); - grid-template-columns: auto 1fr auto; - place-items: center; + display: flex; + justify-content: space-between; + align-items: center; position: relative; margin: 0 auto; padding: 0 var(--ffe-spacing-sm); max-width: 1280px; } + &__border { + & .ffe-header__wrapper { + justify-content: center; + } + } + &__link { transition: color var(--ffe-transition-duration) var(--ffe-ease), @@ -110,7 +115,6 @@ } &__logo { - flex-grow: 1; margin: var(--ffe-spacing-xs) 0; a { @@ -308,11 +312,11 @@ &__notification-bubble { font-family: var(--ffe-v-font-strong); font-weight: normal; - font-size: 0.75rem; + font-size: .9rem; line-height: 1; display: inline-grid; place-items: center; - width: 1.6rem; + width: 1.5rem; aspect-ratio: 1; background: var(--ffe-v-notification-bubble-background-color); color: var(--ffe-v-notification-bubble-text-color); @@ -335,8 +339,6 @@ } &__icon-button--user-nav { - display: grid; - grid-template-columns: 1fr auto; .ffe-header__notification-bubble { grid-area: 1 e('/') 1 e('/') span 1 e('/') span 1; margin-right: var(--ffe-spacing-sm); @@ -386,6 +388,7 @@ &__secondary-nav { display: block; + flex: 1; .ffe-header__list-item { display: inline-block; @@ -395,6 +398,7 @@ &__user-nav-toggle { text-align: right; + flex: 1; } &__user-nav {