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

nav.navbar {
    height: @nav_height;
    margin-bottom: 0px;
    padding-right: 10px;
    background-color: @c_base;
    border: none;
    border-radius: 0px;
    z-index: 1;
    @media (max-width: @grid-float-breakpoint-max) { height: @mobile_nav_height; }

    .navbar-logo {
        position: absolute;
        top: 5px;
        left: 10px;
        width: (@nav_height - 10);
        height: (@nav_height - 10);
        background-image: url('/img/logo.png');
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
        cursor: pointer;

        @media (max-width: @grid-float-breakpoint-max) {
            width: (@mobile_nav_height - 10);
            height: (@mobile_nav_height - 10);
        }
    }

    #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;
                    line-height: @nav_height;
                    font-size: 24px;
                }
            }
        }

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

            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;
        }
    }
}