Menu Responsive

Question

Speak guys, how can I hide my menu when I get to 990 resolution? the menu some toggle button appears but when I click on it no menu appears.

.header_topo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 121px;
  background: red; }

.logo {
  padding: 0px 0px 0px 10px;
  margin: 10px 10px 10px 100px;
  line-height: 100px; }

.layout_center {
  width: 100%; }

.wrap_menu {
  float: right;
  margin-right: 108px; }

.wrap_menu ul {
  margin: 0;
  listy-style: none; }

.wrap_menu li a {
  font-size: 1.3em;
  text-decoration: none;
  color: #fff; }

.btn-toggle {
  display: none; }

#navbar ul li {
  list-style: none;
  display: inline-block; }

@media (max-width: 990px) {
  #navbar {
    display: none; }

  .btn-toggle {
    display: block; } }

<div class="layout_center">
  <div id="navbar" class="wrap_menu">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Nossa empresa</a></li>
      <li><a href="#">Fale Conosco</a></li>
    </ul>
  </div>
  <a href="#" class="btn-toggle">Toggle</a>
</div>

Answer 1

Using Javascript

To make it appear with click, you can with javascript, below is an example:

function showMenu() {
  var $navbar = document.getElementById('navbar');
  var style = window.getComputedStyle($navbar);
  
  if(style.display == 'none') {
    $navbar.style.display = 'block';
  } else {
    $navbar.style.display = 'none';
  }
}

.header_topo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 121px;
  background: red; }

.logo {
  padding: 0px 0px 0px 10px;
  margin: 10px 10px 10px 100px;
  line-height: 100px; }

.layout_center {
  width: 100%; }

.wrap_menu {
  float: right;
  margin-right: 108px; }

.wrap_menu ul {
  margin: 0;
  listy-style: none; }

.wrap_menu li a {
  font-size: 1.3em;
  text-decoration: none;
  color: #000; }

.btn-toggle {
  display: none; }

#navbar ul li {
  list-style: none;
  display: inline-block; }

@media (max-width: 990px) {
  #navbar {
    display: none; }

  .btn-toggle {
    display: block; } }

<div class="layout_center">
  <div id="navbar" class="wrap_menu">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Nossa empresa</a></li>
      <li><a href="#">Fale Conosco</a></li>
    </ul>
  </div>
  <a href="#" class="btn-toggle" onclick="showMenu()">Toggle</a>
</div>

---

Using CSS

An alternative with css would be using the :focus, but for that the html would have to have a small change, which is to put the "toggle" button before the menu. But this solution would not exactly create the toggle effect, and yes, when you click the button it opens the menu and when you click outside the button it closes the menu:

.header_topo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  height: 121px;
  background: red; }

.logo {
  padding: 0px 0px 0px 10px;
  margin: 10px 10px 10px 100px;
  line-height: 100px; }

.layout_center {
  width: 100%; }

.wrap_menu {
  float: right;
  margin-right: 108px; }

.wrap_menu ul {
  margin: 0;
  listy-style: none; }

.wrap_menu li a {
  font-size: 1.3em;
  text-decoration: none;
  color: #000; }

.btn-toggle {
  display: none; }

#navbar ul li {
  list-style: none;
  display: inline-block; }

@media (max-width: 990px) {
  #navbar {
    display: none; }

  .btn-toggle {
    display: block; }
    
  .btn-toggle:focus + #navbar {
    display: block;
  }
}

<div class="layout_center">
  <a href="#" class="btn-toggle">Toggle</a>
  <div id="navbar" class="wrap_menu">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Nossa empresa</a></li>
      <li><a href="#">Fale Conosco</a></li>
    </ul>
  </div>
</div>