godaddy-wordpress/go

View on GitHub
.dev/assets/shared/css/header/header-6.scss

Summary

Maintainability
Test Coverage
/*! Header: Header 6 */
.has-header-6 {

    .header__extras {
        display: flex;
        order: 3;

        @include media(large-only) {
            order: 1;
        }
    }

    .header__title-nav {
        order: 2;

        @include media(large) {
            margin-bottom: calc(var(--go-header--padding--y, var(--go-block--padding--x)) * 2);
        }
    }

    .header__inner {
        @include media(large-only) {
            display: flex;
        }
    }

    .header .header__titles {
        flex-direction: column;

        .site-description {
            margin-left: 0;
            margin-right: 0;
            margin-top: var(--go-site-description--margin-top, 0.25rem);

            @include media(large) {
                margin-bottom: calc(var(--go-site-description--margin-top, 0.25rem) * 3);
            }
        }

        .custom-logo-link {
            .custom-logo {
                margin: 0;
            }

            ~ a .site-title {
                margin: 0;
            }
        }
    }

    .header {

        .header__extras {
            @include media(large) {
                justify-content: flex-end;
                margin-left: 0;
                width: 100%;
            }
        }

        .header__title-nav {
            width: 100%;
        }
    }


    .social-icons-container {
        width: 100%;
    }

    .header__nav-toggle {
        order: 3;
    }

    &.menu-is-open {

        .nav-toggle {
            position: absolute;
            right: 15px;
            top: 15px;
            z-index: 1;
        }

        .header__cart-toggle {
            display: none;
        }
    }

    &.has-sticky-header {

        .header__title-nav {
            margin-bottom: 0;
        }
    }

    @include media(large) {

        .header__title-nav {
            align-items: center;
            flex-direction: column;
            order: 2;
        }

        .nav-toggle {
            display: none;
            pointer-events: none;
        }

        .header__navigation {
            justify-content: center;
            margin-left: inherit;
            margin-top: 0.75rem;
            order: 2;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
        }
    }
}