toogle menu not returning to desktop media query

Question

toogle menu not returning to desktop media query

Asked 8 years ago

Viewed 57 times

1

I am developing a responsive menu and it works normally, when enters the media query for tablet it hides the menu and it is only possible to view it by clicking the button, but when the menu is hidden and back to desktop resolution the menu remains hidden. However if I leave the menu active on the tablet resolution and go to desktop there is the menu.

Code example :

$(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><a href="#">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>

Try using fadeToggle instead of toggle

– Mauro Alexandre

2016/11/18 at 19:32
@Mauroalexandre continued the same way,

– Furabio

2016/11/18 at 20:03

1 answer

Browser other questions tagged jquery css3

You are not signed in. Login or sign up in order to post.

by Gabplay • **502** points · Answer 1 · 2016-11-26T02:26:51+00:00

Don’t forget to include the meta tag in the html head:

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

The menu is enabled / deactivated with jQuery, so when deactivated 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;
     }
  }