godaddy-wordpress/go

/*! Header: Primary Menu */
.primary-menu {

    /* A toggling parent item with children */
    .menu-item-has-children {

        & svg {
            color: currentColor;
            display: inline-block;
            height: 0.55rem;
            margin-left: 0.25rem;
            width: 0.55rem;
        }

        &:hover,
        &.child-has-focus {

            > .sub-menu {
                @include media(large) {
                    display: block;
                }
            }
        }
    }

    /* First submenu */
    > li > .sub-menu {
        position: relative;

        @include media(large) {
            position: absolute;
            top: 165%;
        }

        /* Upward dark arrow on top of the flyout sub-menu */
        &::before {
            border-bottom: 10px solid var(--go-submenu--color--background, var(--go-heading--color--text));
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            content: "";
            display: inline-block;
            height: 0;
            left: 5%;
            position: absolute;
            top: -10px;
            transform: translateX(-10px);
            width: 0;

            @include media(large) {
                left: 50%;
            }
        }

        /* Spacer to fix menu hovers */
        &::after {
            bottom: 100%;
            content: "";
            height: 1.75rem;
            left: 0;
            position: absolute;
            right: 0;
            width: 100%;
        }
    }

    /* All other submenus */
    .sub-menu {
        background-color: var(--go-submenu--color--background, var(--go-heading--color--text));
        list-style: none;
        margin: 0;
        padding: 0 1rem;
        z-index: 999;

        @include media(large) {
            display: none;
            left: 50%;
            padding: 0.75rem;
            position: absolute;
            text-align: center;
            transform: translateX(-50%);
            width: 200px;
        }

        /* All submenu link containers (<li>) */
        .menu-item {
            white-space: normal;

            @include media(large) {
                display: block;
                margin-left: 0;
            }
        }

        /* All submenu links */
        a {
            color: var(--go-submenu--color--text, var(--go--color--white));
            width: 100%;

            @include media(large) {
                padding-bottom: 0.35rem;
                padding-top: 0.35rem;
            }

            &::after {
                display: none;
            }

            &:focus {
                @include outline;
                outline-color: var(--go-submenu--color--text, hsla(0, 0%, 100%, 0.25));
                outline-offset: 0;
            }
        }
    }

    /* Tertiary submenu */
    .sub-menu .sub-menu {
        display: block;
        left: 0;
        margin: 0;
        padding: 0;
        position: relative;
        transform: none;
        width: auto;
    }

    &.primary-menu--hide-medium {
        @include media(medium) {
            opacity: 0;
            pointer-events: none;
        }
    }
}

/* Flip icon when item is expanded */
.submenu-is-open {

    svg {
        transform: rotate(180deg);
        z-index: 9999;
    }
}