.nav-item a { font-size:100%; }
@media (min-width: 576px) { .nav-item a {font-size:0.7rem!important;} .nav-item {margin-right: 1vw!important;} .nav-link {padding: 0.5rem 0.3rem !important;}}
@media (min-width: 650px) { .nav-item a {font-size:0.7rem!important;} .nav-item {margin-right: 1.25vw!important;}.nav-link {padding: 0.5rem 0.5rem !important;}}
@media (min-width: 768px) { .nav-item a {font-size:0.8rem!important;} .nav-item {margin-right: 1.5vw!important;} .nav-link {padding: 0.5rem 0.5rem !important;}}
@media (min-width: 992px) { .nav-item a {font-size:0.9rem!important;} .nav-item {margin-right: 1.75vw!important;}}
@media (min-width: 1200px) { .nav-item a {font-size:1rem!important;} .nav-item {margin-right: 2.25vw!important;}}
.nav {
margin: 0 auto;
}
.nv-block a, .nv-block span {
text-decoration: none;
color: white;
}
.nv-block a:hover, .nv-block span:hover {
background-color: rgba(0, 0, 0, 0.116) ;
border-radius: 30px;
}
.nv-block .actives {
background-color: rgba(0, 0, 0, 0.116) ;
border-radius: 30px;
}<nav class="navbar navbar-expand flex-column flex-sm-row" style="background-color: #4d77a9;">
<div class="collapse justify-content-center navbar-collapse" id="navbarNav">
<a class="navbar-brand" style="margin-right: 50px;" href="#">
<img src="./images/vkbonus.png" height="60" class="d-inline-block align-text-top">
</a>
<ul class="nav nav-pills flex-column flex-sm-row">
<li class="nav-item nv-block">
<a class="nav-link flex-sm-fill text-sm-center small-font actives" aria-current="page" href="#">заработать баллы</a>
</li>
<li class="nav-item nv-block">
<a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">мои задания</a>
</li>
<li class="nav-item nv-block">
<a class="nav-link flex-sm-fill text-sm-center small-font disable" aria-current="page" href="#">онлайн-бот</a>
</li>
<li class="nav-item nv-block">
<a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">аукцион</a>
</li>
<li class="nav-item nv-block">
<a class="nav-link flex-sm-fill text-sm-center small-font" aria-current="page" href="#">топ-100</a>
</li>
</ul>
<div class="nv-block">
<a href="#" class="nv-block small-font">
RU</a>
<a href="#" class="nv-block small-font">
EN
</a>
</div>
<a class="navbar-brand" style="margin-right: 50px;" href="#">
<img src="./images/menu3.png" height="50px" class="d-inline-block ml-4 align-text-top">
</a>
</div>
</nav>var Vue = require('vue')
// var VueRouter = require('vue-router') // BUG: Вызывает ошибку "TypeError: o is not a constructor"
// Чтобы исправить данную ошибку необходимо использовать один из следующих вариантов подключения
var VueRouter = require('vue-router').default
// import VueRouter from 'vue-router'
var capes = require('./views/capes.vue') // <= обрати сюда внимание
var Brands = require('./views/Brands.vue')
var Contacts = require('./views/Contacts.vue')
var Projects = require('./views/Projects.vue')
var Blog = require('./views/Blog.vue')
var Post = require('./views/Post.vue')
Vue.use(VueRouter)
var router = new VueRouter({
routes: [
{ path: '/capes', component: capes },
{ path: '/brands', component: Brands },
{ path: '/contacts', component: Contacts },
{ path: '/projects', component: Projects },
{ path: '/blog', component: Blog },
{ path: '/post/:id', name: 'post', component: Post }
]
})
new Vue({
el: '#app',
router: router
})