diff --git a/src/components/navigation/menu-level-container/menu-level-container.scss b/src/components/navigation/menu-level-container/menu-level-container.scss index 5e4245eb2f55eb6009793090373546b467de0e74..08023f7944f7387cd163141d0495399e7b185575 100644 --- a/src/components/navigation/menu-level-container/menu-level-container.scss +++ b/src/components/navigation/menu-level-container/menu-level-container.scss @@ -30,6 +30,11 @@ position: absolute; right: 12px; top: 0; + + @include breakpoint($narrow) { + left: 28px; + right: 28px; + } } } } diff --git a/src/components/navigation/menu/menu.scss b/src/components/navigation/menu/menu.scss index 5d38d130526d680328434db5715867ff94a000c1..bd7fef431958d2eed3a058022641341b914a7bcc 100644 --- a/src/components/navigation/menu/menu.scss +++ b/src/components/navigation/menu/menu.scss @@ -82,7 +82,6 @@ } &__logo-container { - box-shadow: rgba(14, 104, 139, 0.2) 0 20px 20px -20px; display: inline-block; padding: 16px; z-index: 100; @@ -96,29 +95,31 @@ .hy-link__donate { background-color: var(--grayscale-white); bottom: -20px; + box-shadow: rgb(14 104 139 / 20%) 0px -20px 20px -20px; position: sticky; z-index: 102; a { @include font-size(16px, 16px); @include font-weight($semibold); - background-color: var(--brand-main-light); - color: var(--grayscale-white); + align-items: center; + background-color: var(--grayscale-white); + color: var(--grayscale-black); display: block; + display: flex; font-family: var(--main-font-family); + justify-content: center; letter-spacing: -0.4px; - margin: 12px; - padding: 20px; + padding: 20px 0 16px; text-align: center; text-decoration: none; - @include breakpoint($narrow) { - margin: 12px 28px; - } - &:focus { outline: solid 2px var(--additional-yellow); - outline-offset: 4px; + } + + svg { + margin-right: 5px; } } }