.site-header { position: relative; &__content { display: flex; align-items: center; align-content: stretch; justify-content: space-between; @include s-r-6(padding-top); &.has-background { @include s-r-6(padding-top); padding-bottom: 0; } .wp-block-navigation.is-responsive { display: flex; justify-content: flex-end; flex-grow: 1; } @media (min-width: 600px) { .wp-block-navigation.is-responsive { justify-content: center; } } .wp-block-site-title { line-height: var(--wp--custom--line-height--body); } .wp-block-social-links { display: none; &.has-normal-icon-size { font-size: 29px; } .wp-social-link { a { padding: 0; } &.wp-social-link.wp-social-link { margin: 0; } } &.is-style-logos-only { .wp-social-link { padding: 0 4px; } } @include breakpoint(sm) { display: flex; } } .wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) { left: -1.5rem; } } //Header Dark .site-header__wrap { &.header-dark { .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container-open, .wp-block-navigation:not(.has-background) .submenu-container, .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container, .wp-block-navigation.is-responsive:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--custom--color--variant-background-secondary); } .wp-block-navigation.is-responsive:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { color: var(--wp--custom--color--variant-font-secondary); } } } } //mobile menu .wp-block-navigation.is-responsive { &:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--custom--color--background-secondary); color: var(--wp--custom--color--font-secondary); } &__responsive-container.is-menu-open { @include s-r-4(padding); } .has-child.wp-block-navigation-link { .wp-block-navigation-link__container { margin-left: 0; } } .wp-block-navigation__responsive-container-open { width: 3rem; height: 3rem; background: var(--wp--custom--color--background-secondary); border-radius: 100px; display: flex; justify-content: center; align-items: center; &:hover { background: var(--wp--custom--color--background-secondary); } @media (min-width: 600px) { display: none; } } .wp-block-navigation__responsive-container-close { width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; top: 1rem; right: 1rem; &:hover { background: transparent; } @media (min-width: 600px) { display: none; } } } @media (min-width: 600px) { .wp-block-navigation:not(.has-background) .submenu-container, .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation-link__container { background: var(--wp--custom--color--background-secondary); color: var(--wp--custom--color--font-secondary); border: none; border-radius: var(--global--border-radius-xxs); } .wp-block-navigation-link { a { &:hover { text-decoration: underline; } } } .wp-block-navigation:where(.has-background) a, .wp-block-navigation :where(.submenu-container, .wp-block-navigation-link__container) a { padding: 10px 24px; } .wp-block-navigation-link__container { .wp-block-navigation-link:first-child { padding-top: 14px; } .wp-block-navigation-link:last-child { padding-bottom: 14px; } } .wp-block-navigation .has-child :where(.submenu-container, .wp-block-navigation-link__container) { min-width: 15.5rem; // 248px } }