.navbar-codex {

    .nav {
    }
    .nav-link {
        span.active-only {
            display: none;
        }

        &.active {
            span.active-only { display: inline }
        }
    }
}

/*

        <nav  v-show="false"  class="navbar navbar-codex navbar-full navbar-fixed-top navbar-light bg-faded">
            <a class="navbar-brand" href="#">Codex</a>
            <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
            <div class="collapse navbar-toggleable-md" id="navbarResponsive">
                <ul class="nav navbar-nav">
                    <a class="nav-item nav-link active" href="#welcome" v-scroll-to:href="{ offset: -50 }">Welcome <span class="sr-only active-only">(current)</span></a></a>
                    <a class="nav-item nav-link" href="#awesome" v-scroll-to:href="{ offset: -50 }">It's Awesome <span class="sr-only active-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#overview" v-scroll-to:href="{ offset: -50 }">Overview <span class="sr-only active-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#features" v-scroll-to:href="{ offset: -50 }">Features <span class="sr-only active-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#gettings-started" v-scroll-to:href="{ offset: -50 }">Getting started <span class="sr-only active-only">(current)</span></a>
                    <router-link class="nav-item nav-link" :to="{ path: '/codex' }">Live Demo!</router-link>
                    <router-link class="nav-item nav-link" :to="{ name: 'bootstrap' }">Bootstrap</router-link>
                </ul>
            </div>

        </nav>
        */