crispy-css/example/site/_header.scss

/**
 *  site: header
 *
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

@mixin site__header() {
    .header {
        max-width: 100%;

        a {
            text-decoration: none;

            .icon--big {
                font-size: 6rem;
            }

            &:hover {
                color: $crispy__color-primary;
            }
        }

        .group__item {
            display: block;
            margin: 0;

            @include crispy__media-sm() {
                margin-right: 10px;
                display: inline-block;
            }
        }

        .button--transparent {
            &:hover {
                .icon {
                    fill: $crispy__color-white;
                }
            }
        }

        &--fixed {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;

            z-index: 101;
        }

        nav {
            a {
                color: $crispy__color-white;

                &:hover {
                    color: $crispy__color-text;
                }
            }
        }
    }

    .page {
        .header {
            .icon {
                margin: -4px 0 0 0;
            }
        }
    }
}