site-max/scss/_navbar.scss

// Styling for the navbar
#mainNav {
    border-color: fade-out($gray-darker, .95);
    background-color: white;
    @include sans-serif-font;
    @include transition-all;
    .navbar-brand {
        font-weight: 700;
        text-transform: uppercase;
        color: $theme-primary;
        @include sans-serif-font;
        &:hover,
        &:focus {
            color: darken($theme-primary, .1);
        }
    }
    .navbar-toggle {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        color: $gray-darker;
    }
    .navbar-nav {
        > li.nav-item {
            > a.nav-link,
            > a.nav-link:focus {
                font-size: 13px;
                font-weight: 700;
                text-transform: uppercase;
                color: $gray-darker;
                &:hover {
                    color: $theme-primary;
                }
                &.active {
                    color: $theme-primary !important;
                    background-color: transparent;
                    &:hover {
                        background-color: transparent;
                    }
                }
            }
        }
    }
    @media (min-width: 992px) {
        border-color: fade-out(black, .7);
        background-color: transparent;
        .navbar-brand {
            color: fade-out(black, .3);
            &:hover,
            &:focus {
                color: black;
            }
        }
        .navbar-nav > li.nav-item > a.nav-link,
        .navbar-nav > li.nav-item > a.nav-link:focus {
            color: fade-out(black, .3);
            &:hover {
                color: black;
            }
        }
        &.navbar-shrink {
            border-color: fade-out($gray-darker, .95);
            background-color: white;
            .navbar-brand {
                font-size: 16px;
                color: $theme-primary;
                &:hover,
                &:focus {
                    color: darken($theme-primary, .1);
                }
            }
            .navbar-nav > li.nav-item > a.nav-link,
            .navbar-nav > li.nav-item > a.nav-link:focus {
                color: $gray-darker;
                &:hover {
                    color: $theme-primary;
                }
            }
        }
    }
}