I have this code to open a responsive menu, but I could not get it to close.
$('#menuMobile').on("click", function() {
$('.showMenu').slideDown();
});
.container {
width: 100%;
background: #000;
}
/* Cabeçalho */
header .welcome .container .fa-facebook-square,
header .welcome .container .fa-instagram {
display: none;
}
header .welcome .container a {
float: right;
}
header .welcome .container a i,
header .welcome .container a span {
font-size: 14px!important;
}
header .container .logo {
width: 60%;
padding: 15px;
}
header .container .menu {
display: none;
}
header .container .menuMobile {
display: block;
position: relative;
height: 100px;
font: 400 25px 'Open Sans', sans-serif;
}
header .container .showMenu ul li {
list-style: none;
width: 100%;
text-align: center;
}
header .container .showMenu ul li a {
color: #fff;
}
header .container .menuMobile #menuMobile {
color: #fff;
position: absolute;
right: 36px;
top: 30px;
font-size: 40px;
}
header .container .showMenu {
display: none;
background: #000;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><linkrel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="welcome">
<div class="container">
<a href="tel:5434013696"><i class="fas fa-phone"></i><span>(54) 3401-3696</span></a>
<a href=""><i class="fab fa-facebook-square"></i></a>
<a href="" title=""><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="container">
<div class="logo">
<img src="assets/img/logo_owlaser.png">
</div>
<div class="menuMobile">
<i class="fas fa-bars" id="menuMobile"></i>
</div>
<nav class="showMenu">
<ul>
<li><a href="#inicio">inicio</a></li>
<li><a href="#empresa">empresa</a></li>
<li><a href="#produtos">produtos</a></li>
<li><a href="#contato">contato</a></li>
</ul>
</nav>
</div>
</header>