barebones/assets/styles/components/_nav.scss

/**
 * Hamburger menu
 */

.nav-burger {
    float: right;
    transition: all $animation-speed $animation;
}

.nav-burger__line {
    width: 35px;
    height: 3px;
    background-color: map-get($colors, 'brand');
    display: none;
    margin: 8px auto;
    transition: all $animation-speed $animation;

    @include resp-max($breakpoint-md) {
        display: block;
    }

    .nav-burger.open & {
        &:nth-child(2) {
            opacity: 0;
        }

        &:nth-child(1) {
            transform: translateY(11px) rotate(45deg);
        }

        &:nth-child(3) {
            transform: translateY(-11px) rotate(-45deg);
        }
    }
}


/**
 * Navs
 */

.nav {
    list-style: none;
    margin: 0;

    > li {
        display: inline-block;
        margin-right: $base-spacing-unit;

        &:last-child {
            margin-right: 0;
        }
        > a {
            display: block;
        }
    }
}

.nav--header {
    @include resp-max($breakpoint-md) {
        ul {
            list-style: none;
        }
    }
}