menu toogle not returning to desktop query media

Question

menu toogle not returning to desktop query media

Navigation

#1 by (1 votes)

1

I'm developing a responsive menu and it works normally, when it enters the media query for tablet it hides the menu and it is only possible to visualize it through the click of the button, however when the menu is hidden and I return to desktop resolution the menu remains hidden. However if I leave the active menu in tablet resolution and go to desktop there is the menu.

Code sample:

$(document).ready(function() {
  $('button').click(function(){
    $('nav').toggle();
  });
});

* {
  outline: none;
  text-decoration: none !important;
  list-style: none;
}
nav {
  background-color: #f2f2f2;
  height: 40px;
}
ul {
  
}
li {
  width: 150px;
  display: inline-block;
}
a {
  color: black;
}
button {
  display: none !important;
}

@media screen and (max-width: 786px) {
  button {
    display: block !important;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body><header><nav><ul><li><ahref="#">Início</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
        <li><a href="#">Serviços</a></li>
        <li><a href="#">Cadastre-se</a></li>
      </ul>
    </nav>
    <button class="btn btn-primary">Menu Responsivo</button>
  </header>
</body>

jquery css3

asked by anonymous 18.11.2016 / 20:08

1 answer

Sqlite Filter as error in return date with strftime function Mixin in LESS for the "calc ()" function of CSS, how to use two variables?

score 1 · Accepted Answer

Do not forget to include in the head of html the meta tag:

<meta name="viewport" content="width=device-width" />

The menu is enabled / disabled with jQuery, so when disabled at a lower resolution, it will not automatically return to desktop when resizing the screen.

If you want you can try something like this:

 @media screen and (min-width: 768px) {
     button {
         display: none;
     }
     nav {
         display: block;
     }
  }