How to turn list into responsivel menu?

Question

I’m having a hard time turning the list below into a responsive menu, something like Bootstrap’s responsivel navbar. I want to maintain the current style of the menu, but that it behaves like the responsivel navbar of Bootstrap, the one that collects the menu for a clickable button. Following list:

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

I’m using: v4.0.0-beta.2 and jQuery 3.2.1

Current website: www.fabiojanio.com/site_test

File for download: www.fabiojanio.com/site_teste/src.zip

Answer 1

You can do the following.

HTML: (link in your head the link rel)

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

<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>
            <button class="btn-menu"> <i class="fa fa-bars fa-2x" aria-hidden="true"></i> </button>
            <div class="col-md-10 menu">
                <a class="btn-close"><img src="FOTO DO BOTÃO 'X' PARA FECHAR"></a>
                <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>

JS

    $(".btn-menu").click(function(){
$(".menu").show();
});
$(".btn-close").click(function(){
$(".menu").hide();
});
$(".fotodomenuz").click(function(){
$(".menu").show();
});

CSS

.menu {
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0,0,0,0.9);
top: 0;
left: 0;
display: none;
z-index: 999;
}

.btn-menu {
width: 50px;
height: 50px;
float: right;
text-align: center;
cursor: pointer;
background-color: transparent;
border: solid 0px transparent;
margin-top: -52px;
margin-right: 7%;
font-size: 1em;
}

.btn-close {
float: right;
cursor: pointer;
margin-right: 1%;
margin-top: 1%;
}

Remember, you should put this in your css / @query from where you want the menu to appear. With this, if you replace correctly in your project, you can make the menu look like this type:

Any questions, just ask.