Estou com dificuldades para transformar a lista abaixo em um menu responsivo, algo parecido com a navbar responsivel do Bootstrap. Quero manter o estilo atual do menu, mas que ele se comporte igual a navbar responsivel do Bootstrap, aquela que recolhe o menu para um botão clicável. Segue lista:
<nav>
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-md-2 logo">
<h1><i class="fa fa-cogs"></i> Fábio Soluções</h1>
</div>
<div class="col-md-10">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link scrollPage" href="#experiencia">Experiência</a>
</li>
<li class="nav-item">
<a class="nav-link scrollPage" href="#projetos">Projetos</a>
</li>
<li class="nav-item">
<a class="nav-link scrollPage" href="#contato">Contato</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
Estou utilizando: v4.0.0-beta.2 e jQuery 3.2.1
Site atual: www.fabiojanio.com/site_teste
Arquivo para download: www.fabiojanio.com/site_teste/src.zip