godaddy-wordpress/go

/*! Header: Site Navigation */
.header__navigation {
    bottom: 0;
    display: flex;
    flex-direction: column;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    will-change: opacity, visibility;
    z-index: 1;

    @include media(large) {
        align-items: center;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        height: auto;
        justify-content: flex-end;
        margin-left: auto;
        opacity: 1;
        order: 2;
        padding-left: var(--go-navigation--padding--x, 2vw);
        padding-right: 0;
        position: relative;
        text-align: right;
        visibility: visible;
    }

    & li:not(:first-child) {
        @include media(large) {
            margin-left: var(--go-navigation--padding--x, 2vw);
        }
    }

    & .primary-menu [aria-hidden="true"]:not(:hover) {
        display: none !important;
        opacity: 0;
        visibility: hidden;
    }

    & .menu-item {
        position: relative;
        white-space: nowrap;
        width: 100%;

        @include media(large) {
            display: inline-block;
            width: auto;
        }
    }

    & a {
        color: var(--go-navigation--color--text);
        display: inline-block;
        font-display: swap;
        font-family: var(--go-navigation--font-family);
        font-size: var(--go-navigation-mobile--font-size);
        font-weight: var(--go-navigation--font-weight, 400);
        letter-spacing: var(--go-navigation--letter-spacing, normal);
        position: relative;
        text-decoration: none;
        text-transform: var(--go-navigation--text-transform, normal);
        transition: var(--go-navigation--transition, background-color 200ms cubic-bezier(0.7, 0, 0.3, 1), box-shadow 200ms cubic-bezier(0.7, 0, 0.3, 1), border-color 200ms cubic-bezier(0.7, 0, 0.3, 1), color 200ms cubic-bezier(0.7, 0, 0.3, 1), fill 200ms cubic-bezier(0.7, 0, 0.3, 1));

        @include media(large) {
            font-size: var(--go-navigation--font-size);
        }

        &:hover {
            text-decoration: underline;
        }

        &:focus {
            @include media(large) {
                outline-offset: 5px;
            }
        }
    }
}