godaddy-wordpress/go

/* ! Add breakpoints into the DOM for JS hooks */
body::before {
    content: "has-offscreen-nav";
    display: none;

    @include media(large) {
        content: "has-full-nav has-search-toggle";
    }
}

/*! Offscreen Navigation */
.menu-is-open {
    @include media(large-only) {
        overflow: hidden;

        .header__navigation {
            background-color: var(--go-header--color--background, var(--go--color--background));
            font-size: 1.5rem;
            opacity: 1;
            padding-bottom: var(--go-header--padding--y, 3vw);
            padding-left: var(--go-block--padding--x);
            padding-right: var(--go-block--padding--x);
            padding-top: 70px; /* This needs to be auto-generated based on the header height */
            pointer-events: auto;
            text-align: center;
            visibility: visible;

            a {
                display: block;
                font-size: 3.25vmin;
                padding: 0.25rem;

                @include media(small-only) {
                    font-size: 1rem;
                }

                &::after {
                    display: none;
                }
            }
        }

        .header__navigation-inner {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            flex-shrink: 1;
            position: relative;
        }

        .header__navigation-inner > div {
            display: block;
            height: 100%;
            left: 0;
            overflow-x: hidden;
            overflow-y: scroll;
            position: absolute;
            top: 0;
            width: 100%;
        }

        .primary-menu {
            display: flex;
            flex-direction: column;
            height: 100%;
            justify-content: center;
            left: 0;
            min-height: min-content;
            overflow: auto;
            position: absolute;
            top: 0;
            width: 100%;

            li {
                text-align: left;

                svg {
                    right: 0;
                }
            }

            .sub-menu {
                margin-bottom: 1rem;

                &::before {
                    display: none;
                }

                li {

                    &:first-child {
                        padding-top: 0.75rem;
                    }

                    &:last-child {
                        padding-bottom: 0.75rem;
                    }
                }
            }

            .sub-menu li a {
                font-size: 2.25vmin;

                @include media(small-only) {
                    font-size: 0.85rem;
                }
            }

            .menu-item-has-children svg {
                height: 2.25rem;
                margin-left: 0.5rem;
                padding: 0.75rem;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                transition: opacity 0.75s;
                width: 2.25rem;

                &:hover {
                    opacity: 0.5;
                }
            }

            .submenu-is-open svg {
                transform: translateY(-50%) rotate(180deg);
            }
        }
    }
}