hypothetical/resources/assets/less/elements/nav.less

nav.navbar {
    height: @nav_height;
    margin-bottom: 0px;
    padding-right: 10px;
    background: linear-gradient(to right, transparent 0%, fade(@c_base, 40%) 25%, fade(@c_base, 50%) 50%, @c_base 100%);
    border: none;
    border-radius: 0px;
    z-index: 1;

    @media (max-width: @grid-float-breakpoint-max) {
        height: @mobile_nav_height;
        background: fade(@c_base, 55%);
    }

    .navbar-logo {
        position: fixed;
        top: 45px;
        left: 63px;
        width: 145px;
        height: 145px;
        background-image: url('/img/logo.png');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;
        transition: transform 200ms;
        &:hover { transform: scale(1.03); }

        &:active {
            transition: transform 100ms;
            transform: scale(1.01);
        }

        @media (max-width: @grid-float-breakpoint-max) {
            top: 5px;
            left: 10px;
            width: 40px;
            height: 40px;
        }

        @media (min-width: @grid-float-breakpoint) {
            @logoAnimSpeed: 400ms;
            transition: transform 200ms, top @logoAnimSpeed, left @logoAnimSpeed, width @logoAnimSpeed, height @logoAnimSpeed;
            &:active { transition: transform 100ms, top @logoAnimSpeed, left @logoAnimSpeed, width @logoAnimSpeed, height @logoAnimSpeed; }

            &.scaled {
                top: 10px;
                left: 15px;
                width: @nav_height - 20;
                height: @nav_height - 20;
            }
        }
    }

    #navbar {
        box-shadow: none;
        border: none;

        ul.nav {
            li {
                a {
                    padding: 0px 15px;
                    user-select: none;
                    color: @c_text_light;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-size: 36px;
                    font-weight: 500;
                    font-stretch: ultra-condensed;
                    line-height: @nav_height;
                    transition: color 100ms;
                    @media (max-width: 1250px) { font-size: 28px; }
                    @media (max-width: 1050px) { font-size: 24px; }

                    &:after {
                        content: "";
                        display: block;
                        position: absolute;
                        bottom: calc(50% ~"-" 0.8em);
                        left: 50%;
                        transform: translateX(-50%);
                        width: calc(100% ~"-" 20px);
                        height: 3px;
                        background-color: @c_text_light;
                        opacity: 0;
                        transition: opacity 200ms;
                        @media (max-width: @grid-float-breakpoint-max) { bottom: 0px; }
                    }
                }

                &.active a, &.active:hover a, &:hover a, &:focus a { background-color: transparent; }
                &:hover a { color: darken(@c_text_light, 25%); }
                &.active a:after { opacity: 1; }
            }
        }

        @media (max-width: @grid-float-breakpoint-max) {
            position: relative;
            bottom: 4px;
            width: 100vw;
            padding-bottom: 5px;
            background-color: fade(@c_base, 55%);

            ul.nav li a {
                line-height: 40px;
                font-size: 18px;
            }
        }
    }

    .navbar-toggle {
        position: relative;
        bottom: 2px;
        left: 20px;
        border: none;
        &, &:hover, &:focus { background-color: transparent; }

        .icon-bar {
            width: 27px;
            height: 4px;
            background-color: @c_text_light;
            transition: background-color 150ms;
        }

        &:hover .icon-bar { background-color: darken(@c_text_light, 25%); }
     }
}